添加標籤使用JavaScript

Question

我已經從HTML 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爲無。我試過使用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. . .

這是可能的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的代碼。