Analisis singkat JS menciptakan elemen secara dinamis [dua metode]

Pendahuluan :

Ada dua cara untuk membuat elemen

1) menyambungkan elemen yang perlu Anda buat dalam bentuk string; Temukan elemen induk dan langsung tetapkan bagian dalam elemen induk.

2) Gunakan beberapa fungsi yang disediakan oleh objek dokumen dan elemen untuk mencapai penciptaan elemen dinamis (buat elemen => temukan elemen induk => masukkan elemen pada posisi yang ditentukan)

1. Formulir splicing string

Untuk pemahaman yang lebih baik, atur skenario aplikasi.

Hasilkan secara acak satu set angka, render set data ini ke dalam bagan batang, dan letakkan di div [id = "container"], seperti yang ditunjukkan pada gambar di bawah ini

 <div id = "container"> </div> <script> window.onload = function () {var str = ''; untuk (var i = 0; i <30; i ++) {var r = parseInt (math.random ()*100); // acak menghasilkan angka str+= '<div>'+r+'</div>'; // split str} document.getElementById ('container'). InnerHtml = str; } </script>

2. Gunakan beberapa fungsi yang datang dengan objek dokumen dan elemen

Juga menetapkan skenario aplikasi, seperti yang ditunjukkan pada gambar di bawah ini

Dapatkan informasi dalam input dan masukkan ke kiri atau kanan persegi panjang merah di bawah ini sesuai dengan tombol di sebelah kanan.

Solusinya dibagi menjadi tiga langkah :

1. Buat elemen: document.createelement ()
2. Temukan elemen induk: Ini dapat mencocokkan pemilih CSS yang ditentukan melalui ID, nama, nama tag, kelas, dan
3. Sisipkan elemen di lokasi yang ditentukan: element.appendChild (), element.insertbefore ()

Kode Implementasi:

 <Div id = "div-input"> <input type = "text" id = "txt_input" value = "4"/> <input type = "Tombol" id = "leftInsert" value = "leftInsert"/> <input type = "Tombol" id = "rightIsert" value = "rightInsert"/</div> <Div ID = "Span" Span "</span </span </span> </span> </div> <Div ID =" Span "Span" Span "</Span </Span </SPANE </SPANE </SPANE </SPANE </DEV> </DIV> </Div ID =" Span "Span" SPANE <span> 3 </span> </div> <script> window.onload = function () {var inputValue = document.getElementById ('txt_input'). value; document.geteLementById ('leftInsert'). onClick = function () {// input var span di sisi kiri = document.createElement ('span'); // 1. Buat elemen span.innerHtml = inputValue; var container = document.geteLementById ('container'); // 2. Temukan wadah elemen induk. // Masukkan ke document.geteLementById paling kiri} document.geteLementId ('rightInsert'). Onclick = function () {// input var span di sisi kanan = document.createElement ('span'); // 1. Buat elemen span.innerHtml = inputValue; var container = document.geteLementById ('container'); // 2. Temukan wadah elemen induk.AppendChild (SPAN); // 3. Tambahkan elemen di akhir}} </script>

Analisis singkat di atas dari elemen pembuatan dinamis JS [dua metode] 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.