如果innerHTML是邪恶的,那么改变链接文本的更好方法是什么？

Question

我知道innerHTML被认为是邪恶的,但我认为这是改变链接文本的最简单方法.例如:

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

在JS中,您可以使用以下命令更改文本:

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

在Prototype/jQuery中:

$("mylink").innerHTML = new_text;

工作良好.否则,您必须先替换所有子节点,然后添加文本节点.何必？

Answer 1

怎么样

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

这不会受到PEZ描述的问题的影响.

关于Triptych的评论和bobince的回复,这是另一个解决方案:

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

Answer 2

innerHTML根本不是邪恶的.使用它没有任何问题,只要你知道后果.

Answer 3

对于支持DOM3的浏览器,您可以使用textContent:

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

这适用于FF(在3中测试),Opera(在9.6中测试)和Chrome(在1中测试)但不在MSIE7中(未在MSIE8中测试)

添加了示例

它不漂亮,但应该跨浏览器工作(在FF3,Opera9.6,Crome1和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));
    }
}

(更新:增加了对Microsofts专有innerText的支持)

Answer 4

innerHTML 有副作用（例如断开现有 DOM 节点并重新渲染，这可能会很繁重）。人们需要意识到这些影响。任何维护代码的人都需要警惕使用了innerHTML，否则他们可能会遇到奇怪的错误。