javascript - 選択範囲deleteContentsは空のノードを残しますか?

Question

選択範囲をhtmlタグでラップするスクリプトがあります。

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<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<ranges.length; i++)
        {
            selection.addRange(ranges[i]);
        }
    }
}
}

正常に動作しますが、次のテキストを選択してタグを次のコードにラップしようとすると

<strong>W</strong>elcom<strong>e</strong>

コードは次のように変わります

<strong></strong><u><strong>W</strong>elcom<strong>e</strong></u><strong></strong>

それ以外の

<u><strong>W</strong>elcom<strong>e</strong></u>

firebug でコードを調べたところ、 function で問題が発生しましたdeleteContents()。関数 deleteContents() は 2 つの空のノードを残す<strong></strong>ため、コンテンツ全体は削除されません。これはどのように起こりますか？