Artikel ini berbagi dua metode untuk membuat elemen untuk referensi Anda. Konten spesifiknya adalah sebagai berikut
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: Anda dapat mencocokkan pemilih CSS yang ditentukan melalui ID, nama, nama label, kelas, dan cocok dengan pemilih CSS yang ditentukan
3. Masukkan elemen pada posisi 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>Di atas adalah semua tentang artikel ini, saya harap ini akan membantu untuk pembelajaran semua orang.