為什么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/