最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Why does innerHTML not change src of an image? - Stack Overflow

programmeradmin3浏览0评论

I have to set one src to an image object. 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.

Example: /

Could you explain me why it happens, and how to fix it?

I have to set one src to an image object. 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.

Example: http://jsfiddle/WcnCB/3/

Could you explain me why it happens, and how to fix it?

Share Improve this question edited Aug 23, 2012 at 19:47 pimvdb 155k80 gold badges311 silver badges356 bronze badges asked Aug 23, 2012 at 19:41 Paweł BrewczynskiPaweł Brewczynski 2,7433 gold badges32 silver badges46 bronze badges 2
  • just when i thought i knew every reason to never use innerHTML, here's another :P – jbabey Commented Aug 23, 2012 at 19:48
  • @jbabey It's classic mistake anyone learns when they try to do real work with it... my first code freezed the browser for 6 minutes cos of += innerHTML in a loop of 1000 items. It was instant with a pre concatenated string. :P – Esailija Commented Aug 23, 2012 at 19:52
Add a ment  | 

4 Answers 4

Reset to default 5

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. All elements the HTML represents are created again, and meaning is replaced by those new elements. So your old one is distroyed.

The simplest solution is to use createTextNode: http://jsfiddle/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.

Why are you using innerHTML += ... anyway? You should be doing:

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

When you do the greatest sin of all, that is .innerHTML += (specifically innerHTML bined with +=, neither of them are bad alone), what happens is:

  • Serialize the element's DOM subtree into a html string.
  • Concatenate some stuff into that html string
  • Remove all elements from the target element
  • Parse the html resulted above into a new DOM subtree. This means all the elements are new.
  • Append that into the target element

So given this, actual_button refers to a detached dom element. Not to the another img element created from parsing html.

Works if you set the image ID and get it after changing 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/j8yEG/1/

发布评论

评论列表(0)

  1. 暂无评论