Eine kurze Analyse von JS dynamisch erstellen Elemente [zwei Methoden]

Vorwort :

Es gibt zwei Möglichkeiten, Elemente zu erstellen

1) Spleißen Sie die Elemente, die Sie in Form einer Zeichenfolge erstellen müssen. Suchen Sie das übergeordnete Element und weisen Sie die innere Haltung des übergeordneten Elements direkt zu.

2) Verwenden Sie einige Funktionen, die von Dokumenten- und Elementobjekten bereitgestellt werden, um die dynamische Erstellung von Elementen zu erreichen (erstellen Elemente => Übergeordnete Elemente => Elemente an der angegebenen Position einfügen)

1. Saitenspleißformular

Legen Sie zum besseren Verständnis ein Anwendungsszenario fest.

Generieren Sie zufällig eine Reihe von Zahlen, bringen Sie diesen Datensatz in ein Balkendiagramm und platzieren Sie sie in Div [ID = "Container"], wie in der folgenden Abbildung gezeigt

 <div id = "container"> </div> <script> Fenster.onload = function () {var str = ''; für (var i = 0; i <30; i ++) {var r = parseInt (math.random ()*100); // zufällig generieren Sie eine Zahl str+= '<div>'+r+'</div>'; // split str} document.getElementById ('Container'). Innerhtml = str; } </script>

2. Verwenden Sie einige Funktionen, die mit Dokument- und Elementobjekten ausgestattet sind

Legen Sie auch ein Anwendungsszenario fest, wie in der folgenden Abbildung gezeigt

Holen Sie sich die Informationen in die Eingabe und legen Sie sie nach links oder rechts am roten Rechteck nach der Schaltfläche rechts.

Die Lösung ist in drei Schritte unterteilt :

1. Element erstellen: document.createelement ()
2. Suchen Sie das übergeordnete Element: Es kann mit dem angegebenen CSS -Selektor über ID, Name, Tag -Name, Klasse und übereinstimmen
3. Fügen Sie Elemente an der angegebenen Stelle ein: Element.AppendChild (), Element.insertBefore ()

Implementierungscode:

 <div id="div-input"> <input type="text" id="txt_input" value="4"/> <input type="button" id="leftInsert" value="leftInsert" /> <input type="button" id="rightInsert" value="rightInsert" /></div><div id="container"> <span>1</span> <span>2</span> <span> 3 </span> </div> <script> fenster.onload = function () {var inputValue = document.getElementById ('txt_input'). Wert; document.getElementById ('linksInsert'). onclick = function () {// Eingabe var span auf der linken Seite = document.createelement ('span'); // 1. Element span erstellen. var container = document.getElementById ('Container'); // 2. Finden Sie den übergeordneten Elementcontainer. // in die links einfügen} document.getElementById ('rightInsert'). Onclick = function () {// Eingabe var span auf der rechten Seite = document.createelement ('span'); // 1. Element span erstellen. var container = document.getElementById ('Container'); // 2. Finden Sie den übergeordneten Element Container.AppendChild (span); // 3. Element am Ende hinzufügen}} </script>

Die obige kurze Analyse von JS Dynamic Creation Elements [zwei Methoden] ist der gesamte Inhalt, den ich mit Ihnen teile. Ich hoffe, Sie können Ihnen eine Referenz geben und ich hoffe, Sie können wulin.com mehr unterstützen.