Bagaimana untuk mengklon bahagian dalam JavaScript

Dalam pembangunan bahagian hadapan, kita selalunya perlu menyalin atau mengklon elemen HTML dan memasukkannya ke lokasi lain dalam halaman web. Operasi ini sangat biasa, terutamanya apabila menjana jadual, senarai, menu, borang dan elemen lain secara dinamik. Dalam JavaScript, kami boleh menggunakan banyak kaedah untuk mengklon bahagian, dan artikel ini akan memperkenalkan anda kepada beberapa daripadanya.

1. Gunakan kaedah cloneNode()

cloneNode() ialah kaedah pengklonan nod dalam JavaScript. Ia mempunyai parameter Boolean yang menentukan sama ada untuk mengklon semua nod anak di bawah nod pada masa yang sama Jika parameter adalah benar, nod anak akan diklonkan bersama.

Berikut ialah contoh menggunakan kaedah cloneNode() untuk mengklon satu nod atau berbilang nod:

// 克隆单个节点
var originalNode = document.getElementById("original");
var clonedNode = originalNode.cloneNode(true);
document.body.appendChild(clonedNode);

// 克隆多个节点
var originalNodes = document.getElementsByClassName("original");
for (var i = 0; i < originalNodes.length; i++) {
  var clonedNode = originalNodes[i].cloneNode(true);
  document.body.appendChild(clonedNode);
}

Dalam kod di atas, kami menggunakan kaedah cloneNode() dan menetapkan parameter kepada benar untuk mengklonkan nod asal dan semua nod anaknya dan dilampirkan pada dokumen.

2. Gunakan atribut innerHTML

Atribut innerHTML mengembalikan rentetan yang mengandungi elemen dan sub-elemennya Kami boleh menggunakan atribut ini untuk mengklon bahagian. Kita boleh menetapkan nilai atribut innerHTML kepada nilai atribut outerHTML nod yang akan diklon, dengan itu mengklon seluruh nod.

Berikut ialah contoh menggunakan atribut innerHTML untuk mengklon satu nod atau berbilang nod:

// 克隆单个节点
var originalHtml = document.getElementById("original").outerHTML;
document.body.insertAdjacentHTML("beforeend", originalHtml);

// 克隆多个节点
var originals = document.getElementsByClassName("original");
for (var i = 0; i < originals.length; i++) {
  var originalHtml = originals[i].outerHTML;
  document.body.insertAdjacentHTML("beforeend", originalHtml);
}

Dalam kod di atas, kita mula-mula mendapatkan nilai atribut outerHTML nod yang perlu diklon, dan kemudian gunakan kaedah insertAdjacentHTML() untuk memasukkannya ke dalam pepohon DOM. Dalam contoh di atas, kami memasukkan nod di hujung dokumen Anda boleh memasukkannya di lokasi lain seperti yang diperlukan.

3. Gunakan kaedah klon() jQuery

jQuery ialah perpustakaan JavaScript yang sangat popular yang menyediakan banyak kaedah mudah untuk memanipulasi DOM. Dalam jQuery, kita boleh menggunakan kaedah clone() untuk menyalin nod. Kaedah ini serupa dengan kaedah cloneNode() dalam JavaScript, tetapi lebih mudah dan lebih mudah digunakan.

Berikut ialah contoh menggunakan kaedah klon() jQuery untuk mengklon satu nod atau berbilang nod:

// 克隆单个节点
var $original = $("#original");
var $cloned = $original.clone();
$("body").append($cloned);

// 克隆多个节点
var $originals = $(".original");
$originals.each(function() {
  var $cloned = $(this).clone();
  $("body").append($cloned);
});

Dalam kod di atas, kami mula-mula menggunakan pemilih jQuery untuk mendapatkan nod yang perlu diklon, dan kemudian gunakan Kaedah klon() mengklonkan nod dan melampirkannya pada dokumen.

4. Ringkasan

Di atas adalah beberapa kaedah pengklonan bahagian menggunakan JavaScript dan jQuery. Dalam pembangunan sebenar, kita boleh memilih kaedah yang berbeza mengikut keperluan. Kaedah cloneNode() ialah kaedah JavaScript asli yang sangat pantas dan cekap, tetapi ia juga sangat mudah untuk menggunakan atribut innerHTML. Pada masa yang sama, jika anda menggunakan jQuery, kaedah klon() juga merupakan pilihan yang baik. Mana-mana kaedah yang anda pilih, anda harus ingat bahawa matlamat utama adalah untuk mengklonkan nod dan semua anaknya ke lokasi baharu, dan anda harus memberi perhatian tambahan kepada butiran semasa mengendalikan nod anak.

Atas ialah kandungan terperinci Bagaimana untuk mengklon bahagian dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!