为什么innerHTML不更改图像的src

Why does innerHTML not change src of an image?

本文关键字：图像 src innerHTML 为什么      更新时间：2023-09-26

我必须为一个图像对象设置一个src。然后我换了它。

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

meaning.innerHTML += ")";

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

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

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

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

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

因此，首先将DOM转换为字符串表示（HTML），然后添加一个)字符，最后将其从HTML转换回DOM。HTML表示的所有元素都会重新创建，并且meaning会被这些新元素所取代。所以你的老朋友很不高兴。

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

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

通过编写innerHTML += ...，您覆盖了以前的HTML并销毁了对它的所有引用，包括actual_button变量。

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

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

当你犯了最大的罪，那就是.innerHTML +=（特别是innerHTML和+=结合在一起，它们都不是坏的）时，会发生的是：

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

因此，鉴于此，actual_button指的是一个分离的dom元素。而不是解析html创建的另一个img元素。

如果您设置图像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/

相关文章：