Dieser Artikel stellt hauptsächlich die JavaScript-Methode zum dynamischen Hinzufügen von Formularelementen vor. Er analysiert die Verwendung von Funktionen im Zusammenhang mit der Bedienung von JavaScript-Formularelementen und zugehörigen Hinweisen anhand von Beispielen. Freunde, die sich für JavaScript interessieren, können auf diesen Artikel verweisen!
Ich habe bereits ähnliche Artikel geschrieben (z. B. das dynamische Hinzufügen von Formularelementen, Eingaben, Schaltflächen usw., implementiert in Javascript), aber jetzt scheint es relativ elementar zu sein. Lassen Sie uns einen erweiterten und einfachen Artikel erstellen
Szenario: Wir müssen Spiel-Screenshots im Hintergrund hochladen, und die Anzahl der Screenshots ist ungewiss. Daher verwenden wir die Methode des dynamischen Hinzufügens von Eingabeknoten, um diesen Effekt zu erzielen
Die Die wichtigsten verwendeten Funktionen sind:
document.getElementById();
objNode.parentNode;
objNode.cloneNode() ;
objNode.removeAtrribute();
objNode.innerHTML();
objNode .appendChild();
html:
<p class="well well-sm">
<p class="form-group">
<label class="form-label">游戏截图:</label>
<input type="file" name="jietu[]" class="form-input">
<span class="form-tip" onclick="add_jietu()"><font color="#428bca">点击添加游戏截图</font></span>
</p>
<p class="form-group" id="add_jietu">
<label class="form-label">游戏截图:</label>
<input type="file" name="jietu[]" class="form-input">
</p>
</p>javascript:
<script type="text/javascript">
function add_jietu()
{
var add_jietu = document.getElementById('add_jietu');
var nodeFather = add_jietu.parentNode;
var node_clone = add_jietu.cloneNode();
content = add_jietu.innerHTML;
node_clone.removeAttribute('id');
node_clone.innerHTML = content;
nodeFather.appendChild(node_clone);
}
</script>Hinweis:
1. Zeile 6 von js verwendet die Funktion „Klonen“ im geklonten Knoten In Zeile 9 wird der Inhalt benötigt
2. Da der von dieser Methode generierte Variablentyp „Knotentyp“ ist, kann er als Parameter in der Funktion appendChild() verwendet werden
3. Die durch die Attribute nextSibling und lastChild des Knotens erhaltenen Variablen sind vom Typ Text (siehe Debug-Fenster von Chrome)
Verwandte Empfehlungen:
Ausführliche Erläuterung der Skriptmethode zur Erkennung von JavaScript-Browser-Benutzeragenten
Ausführliche Erläuterung von JavaScript selbstausführende Funktionen und jQuery-Erweiterungsmethoden
Das obige ist der detaillierte Inhalt vonBeispiel für das dynamische Hinzufügen von Formularelementen mithilfe von JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
