If innerHTML is evil, then what's a better way change the text of a link?

Question

I know innerHTML is supposedly evil, but I think it's the simplest way to change link text. For example:

<a id="mylink" href="">click me</a>

In JS you can change the text with:

document.getElementById("mylink").innerHTML = new_text;

And in Prototype/jQuery:

$("mylink").innerHTML = new_text;

works fine. Otherwise you have to replace all of the child nodes first and then add a text node. Why bother?

Answer 1

innerHTML has side effects (like disconnecting existing DOM nodes and rerendering that might be heavy). One needs to be aware of these effects. And anyone maintaining the code will need to be alert to that innerHTML is used or they might run into strange bugs.

Answer 2

innerHTML is not evil at all. There's nothing wrong with using it, as long as you're aware of the consequences.

Answer 3

Maybe it's just some standard addicts who reject the idea of innerHTML.

innerHTML is the practical standard because all browsers implement it though it's not a W3C standard.

Just use it. It works like a charm.

Answer 4

Up until a year ago, innerHTML was just a lot faster than manipulating events via the DOM. I haven't checked the latest versions of all major browsers for this myself.

Firefox for example doesn't handle this well. It sometimes only updates the screen to reflect the change. If you query the DOM after the change, it still has the old values.

Example: try to change the value of a textarea via innerHTML, and then post the form. It'll silently post the value that the textarea had before. Think of the catastrophic results that something like that could have.

Answer 5

Another option is to have two divs and use .hide() & .show().

Answer 6

How about

document.getElementById('mylink').firstChild.nodeValue = new_text;

This won't suffer from the problems described by PEZ.

Regarding Triptych's comment and bobince's reply, here's another solution:

var oldLink = document.getElementById('mylink'),
    newLink = oldLink.cloneNode(false);
newLink.appendChild(document.createTextNode(new_text));
oldLink.parentNode.replaceChild(newLink, oldLink);

Answer 7

For browsers supporting DOM3 you can use textContent:

document.getElementById("mylink").textContent = new_text;

This works in FF(tested in 3), Opera (tested in 9.6) and Chrome (tested in 1) but not in MSIE7 (haven't tested in MSIE8)

Added example

It's not pretty but should work cross browser (tested in win in FF3, Opera9.6, Crome1 and MSIE7)

function replaceTextContent(element,text) {
    if (typeof element ==="string") element = document.getElementById(element);
    if (!element||element.nodeType!==1) return;
    if ("textContent" in element) {
        element.textContent = text; //Standard, DOM3

    } else if ("innerText" in element) {
        element.innerText = text; //Proprietary, Micosoft
    } else {
        //Older standard, even supported by Microsoft
        while (element.childNodes.length) element.removeChild(element.lastChild);
        element.appendChild(document.createTextNode(text));
    }
}

(updated: added support for Microsofts proprietary innerText)