Μέθοδος cloneNode

Η μέθοδος cloneNode επιτρέπει την κλωνοποίηση ενός στοιχείου και την απόκτηση ενός ακριβούς αντιγράφου του. Αυτό το αντίγραφο μπορεί στη συνέχεια να εισαχθεί στη σελίδα με τη βοήθεια των μεθόδων prepend, append, appendChild, insertBefore ή insertAdjacentElement.

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

Σύνταξη

στοιχείο.cloneNode(true ή false);

Παράδειγμα

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

<div id="parent">
	<div class="elem">
		<p>κείμενο1</p>
		<p>κείμενο2</p>
	</div>
</div>

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

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

Αποτέλεσμα εκτέλεσης του κώδικα:

<div id="parent">
	<div class="elem">
		<p>κείμενο1</p>
		<p>κείμενο2</p>
	</div>
	<div class="elem">
		<p>κείμενο1</p>
		<p>κείμενο2</p>
	</div>
</div>

Παράδειγμα

Με το κλώνο που προκύπτει μπορούμε να δουλέψουμε όπως με ένα συνηθισμένο στοιχείο:

<div id="parent">
	<div class="elem">
		<p>κείμενο1</p>
		<p>κείμενο2</p>
	</div>
</div>

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

let clone = elem.cloneNode(true);
clone.children[0].textContent = 'νέο κείμενο1';
clone.children[1].textContent = 'νέο κείμενο2';

parent.appendChild(clone);

Αποτέλεσμα εκτέλεσης του κώδικα:

<div id="parent">
	<div class="elem">
		<p>κείμενο1</p>
		<p>κείμενο2</p>
	</div>
	<div class="elem">
		<p>νέο κείμενο1</p>
		<p>νέο κείμενο2</p>
	</div>
</div>

Δείτε επίσης

μέθοδος createElement,
με τη βοήθεια της οποίας μπορείτε να δημιουργήσετε ένα νέο στοιχείο