divコンテナ（javascript）に入力フィールドを追加

Question

divコンテナの最後にいくつかのhtmlデータを追加します。 現在、私はinnerHTMLプロパティを使用して、それを実行します。

<script language="javascript"> 
var addid = 0; 

function addInput(id){ 
    var docstyle = document.getElementById('addlist').style.display; 
    if(docstyle == 'none') 
     document.getElementById('addlist').style.display = ''; 

    addid++; 

    var text = "<div id='additem_"+addid+"'><input type='text' size='100' value='' class='buckinput' name='items[]' style='padding:5px;' /> <a href='javascript:void(0);' onclick='addInput("+addid+")' id='addlink_"+addid+"'>add more</a></div>"; 

    document.getElementById('addlist').innerHTML += text; 
} 
</script> 

<div id="addlist" class="alt1" style="padding:10px;"> 
    New list items are added to the bottom of the list. 
    <br /><br /> 
</div> 

問題は、入力フィールドに入力された値を別の入力フィールドが追加され、一度削除されていることです。 入力したデータを使用せずにコンテンツを追加して保存するにはどうすればよいですか？

PS：jqueryは使用しません。

Answer 1

innerHTML変更リセットフォーム要素のように、このhttp://reference.sitepoint.com/javascript/Node/appendChild

だから、何かを見てみましょう。代わりにappendChildを使用します。このデモをご覧くださいhttp://jsfiddle.net/5sWA2/

function addInput(id) { 

    var addList = document.getElementById('addlist'); 
    var docstyle = addList.style.display; 
    if (docstyle == 'none') addList.style.display = ''; 

    addid++; 

    var text = document.createElement('div'); 
    text.id = 'additem_' + addid; 
    text.innerHTML = "<input type='text' value='' class='buckinput' name='items[]' style='padding:5px;' /> <a href='javascript:void(0);' onclick='addInput(" + addid + ")' id='addlink_" + addid + "'>add more</a>"; 

    addList.appendChild(text); 
} 

Answer 2

は

document.getElementById('addlist').appendChild(text);