Perbezaan antara appendChild dan append dalam JS

Perbezaan antara appendChild dan append dalam JS memerlukan contoh kod khusus

Dalam JavaScript, apabila kita perlu menambahkan elemen anak secara dinamik pada DOM (Document Object Model), kita biasanya menggunakan dua kaedah appendChild dan append. Walaupun tujuan mereka adalah untuk menambah elemen kanak-kanak kepada elemen induk, terdapat beberapa perbezaan dalam penggunaannya.

1. kaedah appendChild
Kaedah appendChild ialah salah satu kaedah objek nod DOM, digunakan untuk menambah nod anak pada nod induk yang ditentukan. Sintaks asas adalah seperti berikut:

parentNode.appendChild(childNode);

Antaranya, parentNode ialah nod induk bagi nod anak yang akan ditambah, dan childNode ialah nod anak yang akan ditambah.

Berikut ialah contoh kod konkrit, dengan mengandaikan kita mempunyai div elemen induk dan elemen anak p:

<div id="parent"></div>
<p id="child">This is a child paragraph.</p>

Kita boleh menggunakan kaedah appendChild untuk menambah elemen anak p ke div elemen induk:

var parent = document.getElementById("parent");
var child = document.getElementById("child");
parent.appendChild(child);

Dalam contoh di atas , nod anak ditambahkan pada nod induk. Pada masa ini, struktur HTML div akan menjadi:

<div id="parent">
  <p id="child">This is a child paragraph.</p>
</div>

2. kaedah tambah
Kaedah tambah menambahkan elemen HTML yang ditentukan pada elemen induk dengan menggunakan pemilih querySelector atau querySelectorAll. Sintaks asas adalah seperti berikut:

parentElement.append(elemen[, ...elemenN]);

Antaranya, parentElement ialah elemen induk yang perlu dilampirkan, dan elemen ialah elemen HTML yang akan dilampirkan.

Berikut ialah contoh kod khusus, dengan mengandaikan kita mempunyai div elemen induk dan elemen anak p:

<div id="parent"></div>
<p id="child">This is a child paragraph.</p>

Kita boleh menggunakan kaedah tambah untuk menambah elemen anak p ke div elemen induk:

var parent = document.getElementById("parent");
var child = document.getElementById("child");
parent.append(child);

Dalam contoh di atas , elemen anak ditambahkan pada elemen induk. Pada masa ini, struktur HTML div akan menjadi:

<div id="parent">
  <p id="child">This is a child paragraph.</p>
</div>

3. Perbezaan antara appendChild dan append

1. Jenis parameter:

   • appendChild hanya menerima satu parameter, iaitu nod anak yang akan ditambahkan
   kaedah tambah boleh menerima Berbilang parameter boleh menambah berbilang sub-elemen sekaligus.
2. Nilai pulangan:
   kaedah appendChild mengembalikan nod anak yang baru ditambah;
   • kaedah tambah tidak mempunyai nilai pulangan.
3. Rentetan ditukar kepada nod teks secara automatik:
   kaedah tambah membenarkan rentetan atau kod HTML sebagai parameter dan ia secara automatik akan menukarnya kepada nod teks dan menambahkannya ke elemen induk
   • kaedah AcpendChild sahaja objek sebagai parameter, rentetan tidak boleh ditambah terus ke elemen induk.

Berikut ialah contoh kod khusus yang membandingkan beberapa perbezaan antara kaedah appendChild dan append:

var parent = document.getElementById("parent");

// 使用appendChild方法添加子节点
var child1 = document.createElement("p");
var text1 = document.createTextNode("This is child 1.");
child1.appendChild(text1);
parent.appendChild(child1);

// 使用append方法添加子元素和字符串
var child2 = document.createElement("p");
var text2 = document.createTextNode("This is child 2.");
child2.appendChild(text2);

var child3 = document.createElement("p");
child3.append("This is child ", 3); 

parent.append(child2, child3, "This is child 4.");

Melalui kod di atas, kita dapat melihat bahawa kaedah append bukan sahaja boleh menambah elemen HTML secara langsung, tetapi juga menukar terus rentetan sebagai nod teks dan ditambah pada elemen induk.

Ringkasnya, terdapat beberapa perbezaan antara kaedah appendChild dan append apabila menambahkan elemen anak pada elemen induk. Dalam proses penggunaan, kita secara fleksibel boleh memilih kaedah mana yang lebih sesuai untuk mencapai tujuan kita.

Atas ialah kandungan terperinci Perbezaan antara appendChild dan append dalam JS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!