Beispiel für das dynamische Hinzufügen von Formularelementen mithilfe von JavaScript

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(&#39;add_jietu&#39;);
  var nodeFather = add_jietu.parentNode;
  var node_clone = add_jietu.cloneNode();
  content = add_jietu.innerHTML;
  node_clone.removeAttribute(&#39;id&#39;);
  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

Erklärung der Unterschiede zwischen drei JavaScript-Simulationsimplementierungs-Kapselungsmethoden und dem Schreiben

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!