title: Selection range deleteContents leaves empty nodes?
body: <p>I have a script to wrap html tags around the selection.</p>
  
  <pre><code>function wrap(tagName)
  {
  var selection;
  var elements = [];
  var ranges = [];
  var rangeCount = 0;
  
  if (window.getSelection)
  {
      selection = window.getSelection();
      if (selection.rangeCount)
      {
          rangeCount = selection.rangeCount;
          for (var i=0; i&lt;rangeCount; i++)
          {
              ranges[i] = selection.getRangeAt(i).cloneRange();
              elements[i] = document.createElement(tagName);
              elements[i].appendChild(ranges[i].cloneContents());
              ranges[i].deleteContents();
              ranges[i].insertNode(elements[i]);
              ranges[i].selectNode(elements[i]);
          }
          selection.removeAllRanges();
          for (var i=0; i&lt;ranges.length; i++)
          {
              selection.addRange(ranges[i]);
          }
      }
  }
  }
  </code></pre>
  
  <p>It works fine, but when I try to select the following text and wrap tags around the following code </p>
  
  <pre><code>&lt;strong&gt;W&lt;/strong&gt;elcom&lt;strong&gt;e&lt;/strong&gt;
  </code></pre>
  
  <p>The code changes to</p>
  
  <pre><code>&lt;strong&gt;&lt;/strong&gt;&lt;u&gt;&lt;strong&gt;W&lt;/strong&gt;elcom&lt;strong&gt;e&lt;/strong&gt;&lt;/u&gt;&lt;strong&gt;&lt;/strong&gt;
  </code></pre>
  
  <p>instead of </p>
  
  <pre><code>&lt;u&gt;&lt;strong&gt;W&lt;/strong&gt;elcom&lt;strong&gt;e&lt;/strong&gt;&lt;/u&gt;
  </code></pre>
  
  <p>I have inspected the code with firebug and it goes wrong at the function <code>deleteContents()</code>. The function deleteContents() leaves two empty nodes <code>&lt;strong&gt;&lt;/strong&gt;</code> so it doesn't delete the whole content. How does this happen?</p>