選択した選択に基づいてフォームを作成するドロップダウンがあります。したがって、誰かが「foobar」を選択するとテキストフィールドが表示され、「cheese」を選択するとラジオボタンが表示されます。その後、ユーザーはこれらのフォームにデータを入力することができます。唯一の問題は、新しいフォーム要素を追加すると、残りの情報がすべて消去されることです。私は現在、フォームに追加するために以下を使用しています：
document.getElementById('theform_div').innerHTML =
document.getElementById('theform_div').innerHTML + 'this is the new stuff';
フォームに入力されたものを保持し、新しいフィールドを最後に追加するにはどうすればよいですか？
設定innerHTMLすると、要素のコンテンツが破棄され、HTMLから再構築されます。
別のDOMツリーを作成し、を呼び出して追加する必要がありますappendChild。
例えば：
var container = document.createElement("div");
container.innerHTML = "...";
document.getElementById("theform_div").appendChild(container);
これは、 jQueryを使用して行う方がはるかに簡単です。
第一歩：
jQuery をヘッダーに追加します。
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”></script>
ステップ2：
次のように、DIV にデータを追加します (置換しないでください)。
$("#theform_div").append("your_new_html_goes_here");
innerHTMLフォーム要素の作成には使用しないでください。古い HTML を新しい HTML で上書きするとinnerHTML、すべての要素が再作成されます。代わりに、DOM を使用して要素を作成および追加する必要があります。
例
function addRadioElement()
{
var frm = document.getElementById("form_container");
var newEl = document.createElement("input");
newEl.type = "radio";
newEl.name = "foo";
newEl.value = "bar";
frm.appendChild(newEl);
}
フレームワーク (jQuery、Dojo、YUI など) を使用せずに行う最も正しい方法は次のとおりです。
var text = document.createTextNode('The text you want to write');
var div = document.createElement('div');
div.appendChild(text);
document.getElementById('theform_div').appendChild(div);
innerHTMLは、ほとんどのブラウザでサポートされていますが、標準に準拠していないため、動作が保証されていません。