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

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

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

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

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

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

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

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

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

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

Δίνεται ένα πεδίο εισαγωγής. Δίνεται ένα κουμπί. Με το πάτημα του κουμπιού κλωνοποιήστε αυτό το πεδίο εισαγωγής.