javascript - 为什么 innerHTML 不更改图像的 src？

Question

我必须将一个 src 设置为一个图像对象。然后我改变它。

但是如果我在元素中添加一些东西(元素的内容)，比如

meaning.innerHTML += ")";

(其中 meaning 是图像的父元素)，那么如果更改对象的 src，它不会影响文档。

示例:http://jsfiddle.net/WcnCB/3/

您能解释一下为什么会发生这种情况以及如何解决吗？

Answer 1

meaning.innerHTML += ')'; 做的比您想象的要多。视觉上它只是附加了一个 ) 字符，但在幕后发生的是:

meaning.innerHTML = meaning.innerHTML + ')';

因此，您首先将 DOM 转换为字符串表示形式 (HTML)，然后添加 ) 字符，最后将其从 HTML 转换回 DOM。 HTML 表示的所有元素都被重新创建，并且 meaning 被那些新元素替换。所以你的旧版本被破坏了。

最简单的解决方案是使用createTextNode:http://jsfiddle.net/WcnCB/4/ .

meaning.appendChild(document.createTextNode(")"));