使用javascript将标签添加到HTML

Question

我有从XSLT生成的HTML，看起来像：

<span id="text">It's like what Sir Ian McKellan told me the day I sold my boat to Karl Lagerfeld: <span id="quote">Parting is such sweet sorrow.</span></span>

我正在尝试使用javascript进行解析，以便添加额外的标记来标记引号周围的上下文。 目的是使用户可以选择是否显示引号加上上下文或仅显示引号。 最终结果将是例如

<span id="text"><span id="preContext">It's like what Sir Ian McKellan told me the day I sold my boat to Karl Lagerfeld: </span><span id="quote">Parting is such sweet sorrow.</span></span>

这样，将preContext的style.display定义为none会很简单。 我已经尝试过使用insertAdjacentHTML; 例如，

document.getElementById("text").insertAdjacentHTML('afterbegin', "<span id='preContext'>");
document.getElementById("quote").insertAdjacentHTML('beforebegin', "</span>");

但是，正如我发现的那样，insertAdjacentHTML可以插入节点，但不能插入单个标签。 上面让我<span id="text"><span id="preContext"></span>It's like. . . <span id="text"><span id="preContext"></span>It's like. . .

这在javascript中是否可行，还是需要在XSLT中完成？ （PS：我不想使用JQuery。）

Answer 1

工作示例： http : //jsfiddle.net/vcSFR/1/

此代码获取第一个textNode，将其包装在一个范围中，然后将原始的第一个文本节点交换为新的范围。

var oDiv = document.getElementById("text");
var firstText = "";
for (var i = 0; i < oDiv.childNodes.length; i++) {
    var curNode = oDiv.childNodes[i];
    if (curNode.nodeName === "#text") {
        firstText = curNode.nodeValue;
        break;
    }
}
firstTextWrapped = '<span id="preContext">' + firstText + '</span>';
oDiv.innerHTML = oDiv.innerHTML.replace(firstText, firstTextWrapped);

感谢https://stackoverflow.com/a/6520270/940252提供了获取第一个textNode的代码。