Retourner à la page d'accueil de TJS

Méthode : HTMLElement.cloneNode()

Clone un élément HTML avec ou sans ses éléments enfants

Syntaxe
HTMLElement element.cloneNode(Boolean deep)

Compatible tous navigateurs

Description
Clone l'élément HTML en incluant ses éléments enfants si deep vaut true.

cloneNode() duplique toutes les propriétés de l'élément initial, avec les attributs, les styles, les classes et même l'identifiant éventuel. Le clonage peut donc générer des doublons de nommage.


Exemple 1 : Clonage d'élément
Code source
<div id="conteneur">
 <div class="fils">Elément <i>N</i></div>
</div>
<div class="btn btn-sm radius cursor-pointer btn-outline" onclick="cloner()">Cloner</div>
<script type="text/javascript">
function cloner() {
 for (var i=0; i<5; i++) {
   var clone=document.querySelector("div.fils").cloneNode(true);
   document.getElementById("conteneur").appendChild(clone);
 }  
}
</script>

Résultat
Elément N
Cloner
Emulation de la console
Explication
Cliquez sur le bouton "Cloner" pour lancer le clonage de l'élément div.fils

Page en rapport
Introduction au DHTML
Page mise à jour le

Nouvelle édition Tout JavaScript chez Dunod

Tout JavaScript le livre chez DunodEn savoir plus
Sortie le 21 octobre

Version papier à 29€90
Format électronique à 22€99.

Commandez en ligne

Chercher une fonction, un objet, ...

Le 01/12/2020 03:54:00 sur php7 en 64.34 ms