title: Add class and tag to span using execCommand
body: <p>When a user selects the text and clicks the <code>Add Annotation</code> button then selected text is moved into the next div and wrapped in a span with the selected color background using <code>execCommand()</code>.</p>
  
  <p>How can I add a class and a <code>&lt;sup&gt;</code> tag to the span?</p>
  
  <p><kbd><a href="https://jsfiddle.net/indianwebdesigner/51Ljwygc/1/" rel="nofollow">Sample JSFIDDLE</a></kbd></p>
  
  <pre><code>function makeEditableAndHighlight(colour) {
      var range, sel = window.getSelection();
      if (sel.rangeCount &amp;&amp; sel.getRangeAt) {
          range = sel.getRangeAt(0);
      }
      document.designMode = "on";
      if (range) {
          sel.removeAllRanges();
          sel.addRange(range);
      }
      // Use HiliteColor since some browsers apply BackColor to the whole block
      if (!document.execCommand("HiliteColor", false, colour)) {
          document.execCommand("BackColor", false, colour);
      }
      document.designMode = "off";
  }
  
  function remove_selection() {
      if (document.selection &amp;&amp; document.selection.empty) {
          document.selection.empty();
      } else if (window.getSelection) {
          var sel = window.getSelection();
          sel.removeAllRanges();
      }
  }
  
  function highlight(colour) {
      var range, sel;
      colour = $('.colors .active').find('a').attr('class');
      if (window.getSelection) {
          // IE9 and non-IE
          try {
              if (!document.execCommand("BackColor", false, colour)) {
                  makeEditableAndHighlight(colour);
              }
          } catch (ex) {
              makeEditableAndHighlight(colour);
          }
      } else if (document.selection &amp;&amp; document.selection.createRange) {
          // IE &lt;= 8 case
          range = document.selection.createRange();
          range.execCommand("BackColor", false, colour);
      }
  }
  
  function getSelectionText() {
      var text = "";
      if (window.getSelection) {
          text = window.getSelection().toString();
  
      } else if (document.selection &amp;&amp; document.selection.type != "Control") {
          text = document.selection.createRange().text;
      }
      return text;
  }
  
  $('.annotation-button').on('click touchend', function () {
      selected_text = getSelectionText();
      var list_count = selected_text.length;
      annotation_color = $('.annotation-select').data('color');
      if (list_count &gt; 0) {
          $('.added-annotation ul').append('&lt;li class="' + annotation_color + '"&gt;&lt;p class="content"&gt;' + selected_text + '&lt;/p&gt;&lt;/li&gt;');
      }
      selection_length = 0;
      var list_length = $('#annotation-form .added-annotation li');
      var i = 1;
      list_length.each(function (element) {
          $(this).find('span').html(i);
          i++;
      });
  
      highlight();
      remove_selection();
  
  });
  
  $('.colors a').click(function () {
      $('.colors li').removeClass('active');
      $(this).parent('li').toggleClass('active');
      $('.annotation-select').removeClass('yellow orange red green purple blue')
      var color_name = $(this).attr('class');
      $('.annotation-select').addClass(color_name).data('color', color_name);
      remove_selection();
      return false;
  });
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>.colors ul {
      margin: 0;
      padding: 0;
  }
  .colors ul li {
      float: left;
      margin-left: 3px;
      margin-bottom: 0;
      position: relative;
      list-style: none;
  }
  .colors ul li:first-child {
      margin-left: 0;
  }
  .colors a {
      height: 25px;
      width: 25px;
      display:block;
      text-indent: 100%;
      white-space: nowrap;
      overflow: hidden;
      background-color: #cecece;
  }
  /*  Colors  */
   .colors .yellow {
      background-color: #ffff00;
  }
  .colors .orange {
      background-color: #ffc000;
  }
  .colors .red {
      background-color: #ff0000;
  }
  .colors .green {
      background-color: #70ad47;
  }
  .colors .purple {
      background-color: #7030a0;
  }
  .colors .blue {
      background-color: #5b9bd5;
  }
  /* Text Selection Backgrounds */
   .annotation-select.yellow .description::selection {
      background: #fafa96;
  }
  .annotation-select.orange .description::selection {
      background-color: #ffc000;
  }
  .annotation-select.red .description::selection {
      background-color: #fa8989;
  }
  .annotation-select.green .description::selection {
      background-color: #b2e391;
  }
  .annotation-select.purple .description::selection {
      background-color: #ca91f5;
  }
  .annotation-select.blue .description::selection {
      background-color: #bbdbf9;
  }
  .annotation-select.yellow .description::-moz-selection {
      background: #fafa96;
  }
  .annotation-select.orange .description::-moz-selection {
      background-color: #ffc000;
  }
  .annotation-select.red .description::-moz-selection {
      background-color: #fa8989;
  }
  .annotation-select.green .description::-moz-selection {
      background-color: #b2e391;
  }
  .annotation-select.purple .description::-moz-selection {
      background-color: #ca91f5;
  }
  .annotation-select.blue .description::-moz-selection {
      background-color: #bbdbf9;
  }
  .colors span {
      position: absolute;
      left: -1px;
      display: none;
      top: -1px;
      height: 25px;
      width: 25px;
      border: 1px solid #242424;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  }
  .colors .active span {
      display: block;
  }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="colors"&gt;
      &lt;ul class="clearfix"&gt;
          &lt;li class="active"&gt;&lt;a href="#" class="yellow"&gt;Yellow &lt;span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" class="orange"&gt;Orange &lt;span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" class="red"&gt;Red &lt;span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" class="green"&gt;Green &lt;span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" class="purple"&gt;Voilet &lt;span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" class="blue"&gt;Blue &lt;span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;&lt;!-- colors --&gt;
  &lt;button type="button" class="annotation-button" &gt;Add Annotation&lt;/button&gt;
  &lt;hr&gt;
  &lt;div class="annotation-select yellow" data-color="yellow"&gt;
      &lt;div class="description text-annotate"&gt;...&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="added-annotation"&gt;
      &lt;ul&gt;&lt;/ul&gt;        
  &lt;/div&gt;
  </code></pre>