Artikel ini menjelaskan metode membuat dan menghapus elemen secara dinamis dalam JavaScript. Bagikan untuk referensi Anda. Analisis spesifiknya adalah sebagai berikut:
Di DOM, kita dapat dengan mudah dan cepat menghapus elemen DOM secara dinamis. Di sini kami akan memberi Anda pengantar singkat.
Contoh 1:
Buat tombol secara dinamis
Salin kode sebagai berikut: <Html>
<head>
<title> Tombol Buat Dinamis </iteme>
<bahasa skrip = "javascript">
var a, b, ab, ba, c;
fungsi createInputA () {
a = document.createElement ("input"); // Gunakan metode pembuatan elemen DOM
a.type = "tombol"; // Atur jenis elemen
a.value = "Tombol A"; // Atur nilai elemen
A.AttachEvent ("OnClick", AddInputB); // Tambahkan acara untuk kontrol
Document.Body.AppendChild (A); // tambahkan kontrol ke bentuk
// a = null; // Lepaskan objek
}
Contoh 2:
Salin kode sebagai berikut: <Html>
<head>
<type skrip = "Teks/JavaScript">
function test () {
// createelement () Buat elemen yang menentukan nama label [seperti: secara dinamis buat hyperlink]
var createa = document.createElement ("a");
createa.id = "a1";
createa.innerText = "Connect to Baidu";
createa.href = "// www.vevb.com";
//createa.color="green "//// tambahkan warna (jangan lupa atribut gaya, jika tidak, tidak akan ada efeknya)
createa.style.color = "hijau"
// Tambahkan lokasi default -Body dan tambahkan node anak
//document.body.appendchild(createa);
// Tempatkan lokasi yang ditentukan
document.getElementById ("Div1"). AppendChild (Createa);
}
fungsi test2 () {
// hapus node ke removechild () di lokasi yang ditentukan
document.getElementById ("Div1"). Removechild (document.getElementById ("a1")); // ID nama duplikat js untuk hanya mengambil yang pertama
}
</script>
</head>
<body>
<!-Pembuatan Elemen Dinamis->
<input type = "tombol" value = "Buat tag" ontClick = "test ()"/> <br/>
<input type = "tombol" value = "hapus untuk membuat tag" onclick = "test2 ()"/>
<Div id = "Div1">
</div>
</body>
</html>
Buat beberapa bentuk secara dinamis:
Salin kode sebagai berikut: <Html>
<head>
<type skrip = "Teks/JavaScript">
window.onload = function () {
var abtn = document.createElement ("input");
var bbtn = document.createElement ("input");
var cbtn = document.createElement ("input");
abtn.type = "tombol";
abtn.value = "tombol a";
abtn.onClick = copybtn;
bbtn.type = "tombol";
bbtn.value = "tombol b";
bbtn.onClick = copybtn;
cbtn.type = "tombol";
cbtn.value = "tombol c";
cbtn.onClick = clearcopybtn;
Document.Body.AppendChild (ABTN);
Document.Body.AppendChild (BBTN);
Document.Body.AppendChild (CBTN);
};
fungsi copybtn () {
var btn = document.createElement ("input");
btn.type = "tombol";
btn.value = this.value;
btn.iscopy = true;
btn.onClick = copybtn;
Document.Body.AppendChild (BTN);
}
fungsi clearcopybtn () {
var btns = document.geteLementsbyTagname ("input");
var length = btns.length;
untuk (var i = panjang-1; i> = 0; i--) {
if (btns [i] .iscopy) {
document.body.removechild (btns [i]);
}
}
}
</script>
</head>
<body>
</body>
</html>
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.