Question

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

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

meaning.innerHTML += ")";

（其中含义是图像的父元素），那么如果更改对象的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(")"));

Answer 2

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

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

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

Answer 3

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

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

因此，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/

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

4 个答案: