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

Mon nouveau livre Tout JavaScript chez Dunod

Tout JavaScript le livre chez DunodEn savoir plus
Sortie le 14 novembre 2019

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

Commandez en ligne

Chercher une fonction, un objet, ...

Le graph des objets Javascript



Chargement
en cours...
Le 06/06/2020 13:16:15 sur php7 en 26.69 ms