JS secara dinamis menambahkan elemen (Div, Li, IMG, dll.) Dan metode untuk mengatur properti

Tetapkan string tag HTML ke variabel JavaScript. Selain kutipan ganda yang melarikan diri dari nilai atribut, string masih sangat panjang dan tampaknya agak rumit di beberapa titik. Jika Anda menambahkan elemen secara dinamis dengan JS, tidak akan ada string yang kompleks, dan kodenya lebih mudah dibaca dan mudah dimengerti.

Halaman web terdiri dari tag HTML layer demi lapisan, dan JS juga dapat secara dinamis menambahkan lapisan tag seperti Div, Li, dan IMG. Faktanya, apa pun tag HTML itu, metode penciptaan dinamis JS serupa. Kemudian mulailah dengan menambahkan div secara dinamis.

1. Tambahkan elemen div secara dinamis di JS

 <Div id = "Parent"> </div> Function AddElementDiv (OBJ) {var parent = document.getElementById (obj); // tambahkan div var div = document.createelement ("div"); // Atur atribut Div, seperti ID Div.setAttribute ("ID", "NewDiv"); div.innerhtml = "js secara dinamis menambahkan div"; Parent.AppendChild (Div); }

Hubungi: AddElementDiv ("Parent");

2. Tambahkan Li secara dinamis ke JS

 <ul id = "parentul"> <li> asli li </li> </ul> addelementli (obj) {var ul = document.geteLementById (obj); // tambahkan li var li = document.createelement ("li"); // Atur atribut LI, seperti id li.setAttribute ("id", "newli"); li.innerhtml = "js secara dinamis menambahkan li"; UL.AppendChild (Li); }

Hubungi: addelementli ("parentul");

3. Tambahkan elemen img secara dinamis di JS

 <ul id = "parentul"> </ul> fungsi addelementImg (obj) {var ul = document.getElementById (obj); // tambahkan li var li = document.createelement ("li"); // tambahkan img var img = document.createElement ("img"); // Atur atribut IMG, seperti ID img.setAttribute ("id", "newiMg"); // atur alamat gambar img img.src = "/images/prod.jpg"; Li.AppendChild (IMG); UL.AppendChild (Li); }

Hubungi: AddElementImg ("Parentul");

Artikel di atas tentang JS menambahkan elemen secara dinamis (Div, Li, IMG, dll.) Dan atribut pengaturan adalah semua konten yang saya bagikan dengan Anda. Saya harap Anda dapat memberi Anda referensi dan saya harap Anda dapat mendukung wulin.com lebih lanjut.