title: How do I remove the <span> tag that's applied when document.execCommand('insertUnorderedlist') is executed?
body: <p>I have an onlick function that toggles document.execCommand('insertUnorderedList')  When the button is clicked to toggle the UnOrdered List to it's original state, it applies a span tag to the HTML that does not go away unless I delete all the text and backspace.  This is a problem because if I don't manually clear the text, and I apply a an H1, the span's built in font size overrides my CSS and applies a font size that is much smaller then what I currently have my H1 set to in CSS.</p>
  
  <p>I tried to set span to the fontsize I want in the CSS, but because it's being rendered dynamically via execCommand, it doesn't read my CSS.  I've tried clearing out the formatting after the toggle completes with document.execCommand('div', format, false).  I'm using a true false boolean to toggle between the style changes.  The only instance it works is when I put in some text, toggle the UL list from true to false, and from there, change to H1, that works fine.  But I'm concerned about when the user presses the UL button twice, and then tries to go to H1 and get as small bold font, instead of the full size H1. </p>
  
  <pre><code>let h1Size = true;
  let h3Size = true;
  let ulBullets = true;
  function callResizeH1(){
  document.getElementById('h1').addEventListener("click",function () {
      if(h1Size == true &amp;&amp; ulBullets== true){
      h1Size = false;
      h3Size = true;
      ulBullets = true;
  
      document.execCommand( 'formatBlock',false,'&lt;h1&gt;')
     } else if(h1Size === true &amp;&amp; ulBullets === false) {
      h1Size = false;
      h3Size = true;
      ulBullets = true;
  
  document.execCommand('insertUnorderedlist', false, 'div')
  document.execCommand( 'formatBlock',false,'&lt;h1&gt;')
  
  }
  else {
      h1Size = true;
      h3Size = true;
      ulBullets = true;
  
  document.execCommand('formatBlock', false, 'div')
  }
  })
  }
  callResizeH1();
  
  function noH1ResizeForUl() {
  document.getElementById("bullet-list").addEventListener("click", 
  function (){
  
      if (ulBullets || h3Size == false || ulBullets === true &amp;&amp; h1Size 
   == false) {
          ulBullets = false;
          h1Size = true;
          h3Size = true;
          document.execCommand('formatBlock', false, 'div')
          document.execCommand('insertUnorderedlist', false, 'div')
          document.execCommand('formatBlock', false, 'div')
      }
      else{
          ulBullets = true;
          h1Size = true;
          h3Size = true;
          document.execCommand('formatBlock', false, 'div')
          document.execCommand('insertUnorderedlist', false, 'div')
          document.execCommand('formatBlock', false, 'div')
          return;
      }
  
  })
  }
  noH1ResizeForUl()
  </code></pre>
  
  <p>I expect that when ulBillets, h1Size, and h3Size are set back to true, when I press h1 again, I get H1 at the size I want.  Instead, the span tag remains and is set at 12pt instead of the 18pt I defined in CSS.</p>