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 :

html<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 :

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

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

Le résultat sera le suivant :

html<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>