Hinzufügen von Eingabefeldern zu div-container (javascript)

Möchte ich hinzufügen, dass einige html-Daten an das Ende einer div-container.
Derzeit mache ich es mit der Verwendung von 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>

Das problem ist, dass der Wert, der eingegeben wurde in den Eingabefeldern entfernt, wenn ein weiteres Eingabefeld Hinzugefügt.
Wie kann ich Inhalte ohne und halten Sie die Daten eingegeben?

PS: ich glaube nicht, verwenden jquery.

InformationsquelleAutor reggie | 2012-02-26

  1. 4

    innerHTML änderungen zurücksetzen Formular-Elemente. Stattdessen appendChild. Sehen Sie sich diese demo 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);
}
    Dank einem Haufen. Funktioniert wie ein Charme!

    InformationsquelleAutor dfsq

  2. 1

    Werfen Sie einen Blick auf diese http://reference.sitepoint.com/javascript/Node/appendChild

    So etwas wie

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

    InformationsquelleAutor Mattias

Schreibe einen Kommentar