Clonage d'éléments en JavaScript

Dans cette leçon, nous allons apprendre à obtenir des copies d'éléments. Ces copies pourront être manipulées comme des éléments ordinaires - les modifier et les insérer à l'endroit souhaité de la page. Le processus d'obtention de copies d'éléments s'appelle le clonage.

Il est possible de cloner un élément en utilisant la méthode cloneNode. Il faut passer à cette méthode le paramètre 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 est cloné.

Regardons un exemple. Supposons que nous ayons le code suivant :

<div id="parent">
	<div class="elem">
		<p>premier paragraphe</p>
		<p>deuxième paragraphe</p>
	</div>
</div>

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

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

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

Le résultat sera le suivant :

<div id="parent">
	<div class="elem">
		<p>premier paragraphe</p>
		<p>deuxième paragraphe</p>
	</div>
	<div class="elem">
		<p>premier paragraphe</p>
		<p>deuxième paragraphe</p>
	</div>
</div>

Un input est donné. Un bouton est donné. Lors du clic sur le bouton, clonez cet input.