为什么innerHTML不会改变图像的src？

Question

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

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

meaning.innerHTML += ")";

（其中含义是图像的父元素），那么如果更改对象的src则不会影响文档。

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

你能解释一下它为什么会发生，以及如何解决它？

Answer 1

meaning.innerHTML += ')'; 比你想象的还要多。 目测它只是附加一个)的性格，但在幕后发生的事情是：

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

因此，您首先将DOM转换为字符串表示（HTML），然后添加a )字符，最后将其从HTML转换回DOM。 HTML表示的所有元素都会再次创建，并且meaning将被这些新元素替换。 所以你的旧的被破坏了。

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

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

Answer 2

通过编写innerHTML += ...您将覆盖之前的HTML并销毁对它的每个引用 - 包括actual_button变量。

为什么你innerHTML += ...使用innerHTML += ... ？ 你应该这样做：

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

Answer 3

当你犯下最大的罪恶时，那就是.innerHTML += （特别是innerHTML与+=结合，两者都不是坏事），会发生什么：

• 将元素的DOM子树序列化为html字符串。
• 将一些内容连接到该html字符串中
• 从目标元素中删除所有元素
• 将上面得到的html解析为新的DOM子树。 这意味着所有元素都是新的。
• 将其附加到目标元素中

因此， actual_button ， actual_button引用了一个分离的dom元素。 不是通过解析html创建的另一个img元素。

Answer 4

如果您设置图像ID并在更改innerHTML后获取它，则可以正常工作：

var meaning = document.getElementById('meaning');
meaning.innerHTML += 'Something ...';

var actual_button = document.createElement('img');
actual_button.id = 'actual_button';
actual_button.src = 'http://www.pawelbrewczynski.tk/images/add.png';
actual_button.className = 'add_word';

meaning.appendChild(actual_button);
meaning.innerHTML += " ... and another.";

var actual_button= document.getElementById('actual_button');
actual_button.src = 'http://www.pawelbrewczynski.tk/images/loading.gif';

http://jsfiddle.net/j8yEG/1/