Pengklonan Elemen dalam JavaScript

Dalam pelajaran ini, kita akan belajar untuk mendapatkan salinan elemen. Salinan ini boleh diuruskan seperti elemen biasa - mengubahnya dan memasukkan mereka ke tempat yang betul pada halaman. Proses mendapatkan salinan elemen dipanggil pengklonan.

Elemen boleh diklon menggunakan kaedah cloneNode. Kaedah ini perlu diberikan parameter true atau false. Jika true diberikan, elemen akan diklon sepenuhnya, bersama-sama dengan semua atribut dan elemen anak, dan jika false - hanya elemen itu sendiri.

Mari kita lihat contoh. Katakan kita mempunyai kod seperti berikut:

html<div id="parent">
  <div class="elem">
    <p>perenggan pertama</p>
    <p>perenggan kedua</p>
  </div>
</div>

Mari buat salinan blok dengan kelas elem dan masukkan ke hujung blok #parent:

javascriptlet parent = document.querySelector('#parent');
let elem = parent.querySelector('.elem');

let clone = elem.cloneNode(true);
parent.appendChild(clone);

Hasilnya adalah seperti berikut:

html<div id="parent">
  <div class="elem">
    <p>perenggan pertama</p>
    <p>perenggan kedua</p>
  </div>
  <div class="elem">
    <p>perenggan pertama</p>
    <p>perenggan kedua</p>
  </div>
</div>