4

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

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

meaning.innerHTML += ")";

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

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

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

4

4 回答 4

5

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

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

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

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

meaning.appendChild(document.createTextNode(")"));
于 2012-08-23T19:44:37.980 回答
4

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

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

meaning.appendChild(document.createTextNode("(Something"));
于 2012-08-23T19:44:21.997 回答
1

当您犯下最大的罪过时，即.innerHTML +=（特别是innerHTML与 结合+=，它们都不是单独的坏事），会发生什么：

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

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

于 2012-08-23T19:46:33.597 回答
1

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

于 2012-08-23T19:51:35.367 回答