Question

This is a followup question to Removing <span> tag while leaving content intact, with just javascript

If I use spans to highlight text in a page, it breaks up the content into new nodes. And then, when I remove the highlight spans using replaceChild, the nodes remain separated. I would like to have the original text merged back into a single text node, instead of three text nodes – the text before the highlighting started, the text that was previously highlighted, and the text after the highlighting ended. Is this possible to do?

Answer 1

Similar to Jim’s suggestion but accommodates IE:

containerElement.innerHTML = containerElement.textContent || containerElement.innerText;

Or a much longer version:

var text = containerElement.textContent || containerElement.innerText;

while (containerElement.firstChild) {
    containerElement.removeChild(containerElement.firstChild);
}
containerElement.appendChild(document.createTextNode(text));

I think the first is simpler.