Adding tags to HTML using javascript

Question

I have HTML produced from XSLT that looks like:

<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>

I'm trying to use javascript to parse it such that extra tags are added to mark the context around the quote. The goal is to give users the option whether or not to display the quote plus context or just the quotation. The end result would be, eg,

<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>

This way, it would be simple to define the style.display of preContext as none. I've tried using insertAdjacentHTML; for example,

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

But, as I've discovered, insertAdjacentHTML can insert nodes but not individual tags. The above gets me <span id="text"><span id="preContext"></span>It's like. . . <span id="text"><span id="preContext"></span>It's like. . .

Is this possible in javascript, or does this need to be done in XSLT? (PS: I don't want to use JQuery. . )

Answer 1

Working example: http://jsfiddle.net/vcSFR/1/

This code gets the first textNode, wraps it in a span, and then swaps the original first text node for the new span.

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);

Thanks to https://stackoverflow.com/a/6520270/940252 for the code to get the first textNode.