Κλωνοποίηση στοιχείων στην JavaScript

Σε αυτό το μάθημα θα μάθουμε να λαμβάνουμε αντίγραφα στοιχείων. Αυτά τα αντίγραφα μπορούν να χειριστούν, όπως τα συνηθισμένα στοιχεία - να τροποποιηθούν και να εισαχθούν στην επιθυμητή θέση της σελίδας. Η διαδικασία λήψης αντιγράφων στοιχείων ονομάζεται κλωνοποίηση.

Μπορείτε να κλωνοποιήσετε ένα στοιχείο χρησιμοποιώντας τη μέθοδο cloneNode. Αυτή η μέθοδος πρέπει να λαμβάνει ως παράμετρο true ή false. Εάν δοθεί true, το στοιχείο κλωνοποιείται πλήρως, μαζί με όλα τα χαρακτηριστικά και τα θυγατρικά στοιχεία, ενώ εάν δοθεί false - μόνο το ίδιο το στοιχείο.

Ας δούμε ένα παράδειγμα. Ας υποθέσουμε ότι έχουμε τον ακόλουθο κώδικα:

html<div id="parent">
  <div class="elem">
    <p>πρώτη παράγραφος</p>
    <p>δεύτερη παράγραφος</p>
  </div>
</div>

Ας δημιουργήσουμε ένα αντίγραφο του μπλοκ με την κλάση elem και ας το εισάγουμε στο τέλος του μπλοκ #parent:

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

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

Ως αποτέλεσμα, θα λάβουμε το ακόλουθο:

html<div id="parent">
  <div class="elem">
    <p>πρώτη παράγραφος</p>
    <p>δεύτερη παράγραφος</p>
  </div>
  <div class="elem">
    <p>πρώτη παράγραφος</p>
    <p>δεύτερη παράγραφος</p>
  </div>
</div>