[英]Why does innerHTML not change src of an image?
I have to set one src to an image object. 我必须将一个src设置为图像对象。 Then I change it.
然后我改变它。
But if I add something to the element (content of element), such as 但是如果我在元素中添加一些东西(元素的内容),比如
meaning.innerHTML += ")";
(where meaning is parent element of image), then if change the src of object it won't affect the document. (其中含义是图像的父元素),那么如果更改对象的src则不会影响文档。
Example: http://jsfiddle.net/WcnCB/3/ 示例: http : //jsfiddle.net/WcnCB/3/
Could you explain me why it happens, and how to fix it? 你能解释一下它为什么会发生,以及如何解决它?
meaning.innerHTML += ')';
does more than you think. 比你想象的还要多。 Visually it just appends a
)
character, but behind the scenes what happens is: 目测它只是附加一个
)
的性格,但在幕后发生的事情是:
meaning.innerHTML = meaning.innerHTML + ')';
So, you're first converting the DOM to a string representation (HTML), then adding a )
character, and finally have convert it back from HTML to the DOM. 因此,您首先将DOM转换为字符串表示(HTML),然后添加a
)
字符,最后将其从HTML转换回DOM。 All elements the HTML represents are created again, and meaning
is replaced by those new elements. HTML表示的所有元素都会再次创建,并且
meaning
将被这些新元素替换。 So your old one is distroyed. 所以你的旧的被破坏了。
The simplest solution is to use createTextNode
: http://jsfiddle.net/WcnCB/4/ . 最简单的解决方案是使用
createTextNode
: http : //jsfiddle.net/WcnCB/4/ 。
meaning.appendChild(document.createTextNode(")"));
By writing innerHTML += ...
you are overwriting the previous HTML and destroying every reference to it - including the actual_button
variable. 通过编写
innerHTML += ...
您将覆盖之前的HTML并销毁对它的每个引用 - 包括actual_button
变量。
Why are you using innerHTML += ...
anyway? 为什么你
innerHTML += ...
使用innerHTML += ...
? You should be doing: 你应该这样做:
meaning.appendChild(document.createTextNode("(Something"));
When you do the greatest sin of all, that is .innerHTML +=
(specifically innerHTML
combined with +=
, neither of them are bad alone), what happens is: 当你犯下最大的罪恶时,那就是
.innerHTML +=
(特别是innerHTML
与+=
结合,两者都不是坏事),会发生什么:
So given this, actual_button
refers to a detached dom element. 因此,
actual_button
, actual_button
引用了一个分离的dom元素。 Not to the another img element created from parsing html. 不是通过解析html创建的另一个img元素。
Works if you set the image ID and get it after changing innerHTML : 如果您设置图像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';
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.