2017-04-08 22 views
0

Ich versuche, ein neues Eingabefeld auf den Klick einer Schaltfläche anzuhängen.Wie füge ich dynamisch neue Eingabefelder zu meiner Seite hinzu?

var div = document.getElementById('row');  
 
    document.getElementById('create_row').onclick = function (e) { 
 
    div.innerHTML = div.innerHTML + '<input type="text" name="ain[]" placeholder="something..."/>'; 
 
}
<div id="row"></div> 
 
<button type="button" id="create_row">button</button>

Dies funktioniert groß zu sein scheint! Aber jedes Mal, wenn ich den Knopf drücke, verschwindet der hinzugefügte Feldinhalt.

Also, ich möchte den Inhalt des hinzugefügten Feldes an Ort und Stelle zu verlassen.

Hilfe! The _ ㅠ

Antwort

0

Die innerHTML eines Elements ändert sich nicht, nur weil Sie etwas in ein Eingabefeld eingeben.

Deshalb, wenn Sie div.innerHTML = div.innerHTML + "something new" tun, dann wird der Inhalt des DIV sein, wie es ursprünglich war, plus das "something new". Jetzt hat sich das innerHTML geändert, aber Sie verlieren den gesamten eingegebenen Text, weil Ihre Eingabefelder weggeworfen und ersetzt werden.

Das bedeutet, dass Sie vermeiden sollten, das innerHTML zu überschreiben.

Erstellen Sie stattdessen einen neuen DOM-Knoten (read about the DOM) und hängen Sie ihn an das DIV an.

var div = document.getElementById('row');  
 
var row = document.getElementById('create_row'); 
 

 
row.onclick = function (e) { 
 
    var newInput = document.createElement("input"); 
 
    newInput.type = "text"; 
 
    newInput.name = "ain[]"; 
 
    newInput.placeholder = "type something..."; 
 

 
    div.appendChild(newInput); 
 
    newInput.focus(); 
 
}
#row { 
 
    width: 100px; 
 
} 
 
#row > input { 
 
    display: block; 
 
}
<div id="row"></div> 
 
<button id="create_row">Create Row</button>

+0

Danke freundlich verantworten! Was passiert, wenn ich mehr als zwei „div“? '' '' wie .... '

' – Laeng

+0

mehr Elemente erstellen, hängen Sie sie in der richtigen Reihenfolge zueinander stehen. Irgendwann wird es einfacher, in ein Tool zu schauen, das das für dich tut (Stichwort HTML-Templating), aber ich ermutige dich, es zuerst ohne Hilfe eines Tools zu versuchen. Dies gibt Ihnen einen Einblick in die Funktionsweise des DOM und wie viel Arbeit diese Werkzeuge unter der Haube verrichten. – Tomalak

+0

Okay! Ich versuche meinen Weg mit deinem Hinweis zu finden! Vielen Dank. : D – Laeng

Verwandte Themen