Javascriptフォームの入力を削除するinnerHTMLに追加する

Question

フォームを使用するときにJavaScriptの「innerHTML」関数に問題が発生しました。私はフォームにさらにオプションを追加しています（そしてそれらをサーバーの配列、例えばfoo []で送信しています）。問題は、別のオプションを追加するためにフォームに別の要素を追加するためにユーザーが押すと、選択した前のオプションが削除されることです。

私はタグ内に同じタイプの別の要素を追加するだけです。私はIE9をターゲットにしており、フレームワークを使用していません。私が使用しています：

this.item

document.getElementById("contents").innerHTML += this.item; 

は、私は、行の末尾に追加するコードです。

ノードツリーを作成するために追加したいコードツリーを再帰し、appendChildを使用して最適な方法を選択するか、より良い方法がありますか？

Answer 1

文字通りinnerHTML +=を使用しない、それが台無しにすべてをでしょう。

insertAdjacentHTMLは、これらのケースのためのものですので、IE4

からサポートされています：

document.getElementById("contents").insertAdjacentHTML("beforeend", this.item)

Answer 2

個々のDOMオブジェクトを追加する必要があります。あなたが行っているようにinnerHTMLに追加する必要はありません。

あなたのコードdocument.getElementById("contents").innerHTML += this.item;は、innerHTMLの内容を文字列（フォーム要素に入力されたものは含まれません）として取得し、文字列の最後に追加してから戻します。それはフォーム要素を混乱させるだけでなく、親の "内容"の子要素であるDOM要素をすべて破棄して再作成するので、すべてのイベントハンドラを駄目にします。

これは、親に他のオブジェクトが含まれているときにinnerHTMLを使用するのが悪い場合の古典的な例です。 innerHTMLの内容の最後に追加しようとしているだけの場合は、独自のDOM要素を作成してコンテンツの末尾に追加するだけです。ここでは、あなたがその問題なく、いくつかの簡単なテキストを追加でき方法は次のとおりです。

var span = document.createElement("span"); 
span.innerHTML = this.item; 
document.getElementById("contents").appendChild(span);