So fügen Sie Elemente (div, li, img usw.) dynamisch hinzu und legen Attribute in js fest

Weisen Sie einer Javascript-Variablen eine Zeichenfolge mit HTML-Tags zu. Zusätzlich zum Attributwert mit maskierten doppelten Anführungszeichen ist die Zeichenfolge manchmal sehr lang und wirkt etwas kompliziert. Wenn Sie js zum dynamischen Hinzufügen von Elementen verwenden, gibt es keine so komplizierten Zeichenfolgen und der Code ist besser lesbar und verständlicher.

Webseiten bestehen aus Schichten von HTML-Tags, und js kann auch Schichten von Tags wie div, li und img dynamisch hinzufügen. Unabhängig davon, um welches HTML-Tag es sich handelt, ist die Methode zum dynamischen Erstellen mit js dieselbe. Dann beginnen wir mit dem dynamischen Hinzufügen von div.

1. js dynamisch Element div hinzufügen

<div id="parent"></div>
 
　　function addElementDiv(obj) {
　　　　var parent = document.getElementById(obj);
 
　　　　//添加 div
　　　　var div = document.createElement("div");
 
　　　　//设置 div 属性，如 id
　　　　div.setAttribute("id", "newDiv");
 
　　　　div.innerHTML = "js 动态添加div";
　　　　parent.appendChild(div);
　　}

Aufruf: addElementDiv("parent");

2 , js fügt li dynamisch hinzu

<ul id="parentUl"><li>原li</li></ul>
 
　　function addElementLi(obj) {
　　　　var ul = document.getElementById(obj);
 
　　　　//添加 li
　　　　var li = document.createElement("li");
 
　　　　//设置 li 属性，如 id
　　　　li.setAttribute("id", "newli");
 
　　　　li.innerHTML = "js 动态添加li";
　　　　ul.appendChild(li);
　　}

Aufruf: addElementLi("parentUl");

3. js fügt dynamisch das Element img hinzu

<ul id="parentUl"></ul>
 
　　function addElementImg(obj) {
　　　　var ul = document.getElementById(obj);
 
　　　　//添加 li
　　　　var li = document.createElement("li");
 
　　　　//添加 img
　　　　var img = document.createElement("img");
 
　　　　//设置 img 属性，如 id
　　　　img.setAttribute("id", "newImg");
 
　　　　//设置 img 图片地址
　　　　img.src = "/images/prod.jpg";
 
　　　　li.appendChild(img);
　　　　ul.appendChild(li);
　　}

Aufruf: addElementImg("parentUl");

Das obige js fügt dynamisch Elemente hinzu (div, li, img usw.) und Die Methode zum Festlegen von Eigenschaften ist der gesamte vom Herausgeber freigegebene Inhalt. Ich hoffe, dass er Ihnen eine Referenz geben kann, und ich hoffe auch, dass Sie die chinesische PHP-Website unterstützen.

Weitere js-Methoden zum dynamischen Hinzufügen von Elementen (div, li, img usw.) und zum Festlegen von Attributen finden Sie auf der chinesischen PHP-Website für verwandte Artikel!