javascript - なぜinnerHTMLは画像のsrcを変更しないのですか？

Question

1つのsrcを画像オブジェクトに設定する必要があります。それから私はそれを変更します。

しかし、要素（要素のコンテンツ）に何かを追加すると、

meaning.innerHTML += ")";

（意味は画像の親要素です）、オブジェクトのsrcを変更しても、ドキュメントには影響しません。

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

なぜそれが起こるのか、そしてそれを修正する方法を教えてください。

Answer 1

meaning.innerHTML += ')';あなたが思っている以上のことをします。視覚的には)文字を追加するだけですが、舞台裏では次のことが起こります。

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

したがって、最初に DOM を文字列表現 (HTML) に変換し、次に)文字を追加し、最後にそれを HTML から DOM に変換し直します。HTML が表すすべての要素が再度作成され、meaningそれらの新しい要素に置き換えられます。だからあなたの古いものは壊れています。

最も簡単な解決策は、http://jsfiddle.net/WcnCB/4/createTextNodeを使用することです。

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

Answer 2

書き込むinnerHTML += ...ことで、以前の HTML を上書きし、それへのすべての参照 (actual_button変数を含む) を破棄します。

そもそもなんで使っinnerHTML += ...てんの？あなたがしているはずです：

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

Answer 3

イメージ 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/

Answer 4

あなたがすべての中で最大の罪を犯すとき、つまり.innerHTML +=(具体的にはinnerHTMLと組み合わせて+=、どちらも単独で悪いわけではありません)、何が起こるか:

• 要素の DOM サブツリーを html 文字列にシリアライズします。
• そのhtml文字列にいくつかのものを連結します
• ターゲット要素からすべての要素を削除します
• 上記の結果の html を解析して、新しい DOM サブツリーにします。これは、すべての要素が新しいことを意味します。
• それをターゲット要素に追加します

したがって、これを考えるactual_buttonと、切り離された dom 要素を参照します。html の解析から作成された別の img 要素ではありません。