Méthode cloneNode

La méthode cloneNode permet de cloner un élément et d'obtenir sa copie exacte. Cette copie peut ensuite être insérée dans la page à l'aide des méthodes prepend, append, appendChild, insertBefore ou insertAdjacentElement.

En paramètre, la méthode reçoit true ou false. Si true est passé, l'élément est cloné entièrement, avec tous ses attributs et éléments enfants, et si false - seul l'élément lui-même (sans les éléments enfants).

Syntaxe

élément.cloneNode(true ou false);

Exemple

Créons une copie du bloc avec la classe elem et insérons-le à la fin du bloc #parent :

<div id="parent">
	<div class="elem">
		<p>text1</p>
		<p>text2</p>
	</div>
</div>

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

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

Résultat de l'exécution du code :

<div id="parent">
	<div class="elem">
		<p>text1</p>
		<p>text2</p>
	</div>
	<div class="elem">
		<p>text1</p>
		<p>text2</p>
	</div>
</div>

Exemple

Il est possible de travailler avec le clone obtenu comme avec un élément ordinaire :

<div id="parent">
	<div class="elem">
		<p>text1</p>
		<p>text2</p>
	</div>
</div>

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

let clone = elem.cloneNode(true);
clone.children[0].textContent = 'nouveau text1';
clone.children[1].textContent = 'nouveau text2';

parent.appendChild(clone);

Résultat de l'exécution du code :

<div id="parent">
	<div class="elem">
		<p>text1</p>
		<p>text2</p>
	</div>
	<div class="elem">
		<p>nouveau text1</p>
		<p>nouveau text2</p>
	</div>
</div>

Voir aussi

la méthode createElement,
qui permet de créer un nouvel élément