Javascript 如果innerHTML是邪恶的，那么'；更改链接文本的更好方法是什么？

我知道innerHTML被认为是邪恶的，但我认为这是更改链接文本的最简单方法。例如：

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

在Prototype/jQuery中：

$("mylink").innerHTML = new_text;

---

很好。否则，必须先替换所有子节点，然后添加文本节点。为什么要麻烦呢？

innerHTML有副作用（比如断开现有DOM节点的连接并重新命名可能会很麻烦）。人们需要意识到这些影响。任何维护代码的人都需要注意使用了innerHTML，否则他们可能会遇到奇怪的bug。

innerHTML一点也不邪恶。使用它没有什么错，只要你知道后果。

也许只是一些标准的上瘾者拒绝使用innerHTML

innerHTML是实用的标准，因为所有浏览器都实现了它，尽管它不是W3C标准

---

就用它吧。直到一年前，innerHTML比通过DOM处理事件要快得多。我自己还没有检查过所有主要浏览器的最新版本

例如Firefox就不能很好地处理这个问题。它有时只会更新屏幕以反映更改。如果在更改后查询DOM，它仍然具有旧值

---

示例：尝试通过innerHTML更改textarea的值，然后发布表单。它将以静默方式发布textarea以前拥有的值。想想这样做可能会带来的灾难性后果。

另一种选择是使用两个div并使用.hide（）&.show（）。

怎么样

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

---

对于支持DOM3的浏览器，您可以使用：

这适用于FF（在3中测试）、Opera（在9.6中测试）和Chrome（在1中测试），但不适用于MSIE7（在MSIE8中未测试）

添加了示例

它并不漂亮，但应该可以跨浏览器使用（在FF3、Opera9.6、Crome1和MSIE7的win中测试）

---

（更新：增加了对Microsofts专有innerText的支持）

@Wouter:Textarea是一个输入字段，它的值应该用element.values更改。我知道你也可以这样更改它。如果您使用innerHTML，它会被静默地接受，但它不会按照您期望的方式工作。“由于此属性没有公共规范，实现差异很大。例如，当文本输入到文本输入中时，IE将更改输入的innerHTML属性的值属性，但Gecko浏览器不会。”什么HTML应该在TEXTAREA中？TEXTAREA中不应该有HTML，但是innerText也有同样的问题，当然文本应该在TEXTAREA中，对吗？问题是浏览器允许您设置属性。FireFox会更新小部件中的值（因此看起来它工作正常），但不会更新DOM。IE同时更新了这两个选项。在jQuery中，您可以使用html函数设置其内部html:$（“#mylink”）.html（'newHTML'）；“标准瘾君子”？=）不过，标准也有其用途。比如鼓励共同实施。innerHTML在大多数浏览器中都有，但工作方式不同。小心使用它，我会说。s曾经也是一个“实用的标准”。我@佩兹所有的瘾君子都会把他们所沉迷的东西当作有用的东西来解释@Trip…这个玩具不是只针对netscape的吗？不管怎样，在大多数情况下，innerHTML通常比使用DOM快得多。@rob Continental飞弹比747快得多，只是它没有为乘客提供着陆序列，所以你想乘坐它？如果链接包含内部元素，这也不起作用。是的，如果问题不是“更改链接文本的更好方法是什么”，那么您可能有一个观点……作为一般版本，如果a元素中可能有其他内容，请清除内容并添加新的文本节点。例如：while（link.firstChild）link.removeChild（link.firstChild）；link.appendChild（document.createTextNode（“新文本”）；10年后的2018年，没有理由不使用DOM标准的

textContent

：

document.getElementById（'some-id'）。textContent='hello'

是的，就像IE中的bug；-）

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

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

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