Retourner ' la page d'accueil de TJSRetourner ' 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

Troisième édition Tout JavaScript chez Dunod

Tout JavaScript le livre chez DunodEn savoir plus
Sortie le 4 janvier 2023

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

Commandez en ligne

Chercher une fonction, un objet, ...

Le 26/04/2024 01:21:53 sur php 7 en 96 ms