JS fügen Sie dynamisch Elemente (Div, Li, IMG usw.) und Methoden zum Festlegen von Eigenschaften hinzu

Weisen Sie einer JavaScript -Variablen eine Zeichenfolge von HTML -Tags zu. Zusätzlich zu den entkommenen Doppelzitaten des Attributwerts ist die Zeichenfolge immer noch sehr lang und scheint irgendwann etwas kompliziert zu sein. Wenn Sie JS dynamisch Elemente hinzufügen, gibt es keine solchen komplexen Zeichenfolgen und der Code ist lesbarer und leicht zu verstehen.

Webseiten bestehen aus HTML -Tags -Schichten für Schicht, und JS kann auch dynamisch Schichten von Tags wie Div, Li und IMG hinzufügen. Unabhängig davon, welches HTML -Tag es ist, ist die Methode der dynamischen Erstellung von JS ähnlich. Beginnen Sie dann dynamisch Divs hinzu.

1. Fügen Sie Elemente Div dynamisch in JS hinzu

 <div id = "parent"> </div> Funktion addelementDiv (obj) {var parent = document.getElementById (obj); // div var div = document.createelement ("div") hinzufügen; // Setzen Sie das Div -Attribut wie ID div.setattribute ("id", "newdiv"); div.innerhtml = "Js dynamisch add Div"; Parent.AppendChild (Div); }

Anruf: AddElementDiv ("Eltern");

2. Fügen Sie Li dynamisch zu JS hinzu

 <ul id = "parentul"> <li> Original li </li> </ul> Funktion addelementli (obj) {var ul = document.getElementById (obj); // li var li = document.createelement ("li") hinzufügen; // Setzen Sie das Li -Attribut wie ID li.setattribute ("id", "newli"); li.innerhtml = "js dynamisch add li"; Ul.Appendchild (li); }

Anruf: AddElementli ("Parentul");

3.. Elemente img dynamisch in JS hinzufügen

 <ul id = "parentul"> </ul> Funktion addElementImg (obj) {var ul = document.getElementById (obj); // li var li = document.createelement ("li") hinzufügen; // IMG var img = document.createelement ("img") hinzufügen; // das IMG -Attribut festlegen, wie z. B. ID img.setattribute ("ID", "NewImg"); // Setzen Sie die IMG -Bildadresse img.src = "/images/prod.jpg"; Li.Appendchild (IMG); Ul.Appendchild (li); }

Anruf: AddElementImg ("Parentul");

Der obige Artikel über JS addiert dynamisch Elemente (DIV, Li, IMG usw.) und das Einstellen von Attributen 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.