Cloner, remplacer, supprimer…

Parent Previous Next



Cloner, remplacer, supprimer…



Cloner un élément

Pour cloner un élément, rien de plus simple : cloneNode(). Cette méthode requiert un paramètre booléen (true ou false) : si vous désirez cloner le nœud avec (true) ou sans (false) ses enfants et ses différents attributs.


Petit exemple très simple : on crée un élément <hr />, et on en veut un deuxième, donc on clone le premier :

// On va cloner un élément créé :

var hr1 = document.createElement('hr');

var hr2 = hr1.cloneNode(false); // Il n'a pas d'enfants…

 

// Ici, on clone un élément existant :

var paragraph1 = document.getElementById('myP');

var paragraph2 = paragraph1.cloneNode(true);

 

// Et attention, l'élément est cloné, mais pas « inséré » tant que l'on n'a pas appelé appendChild() :

paragraph1.parentNode.appendChild(paragraph2);



Une chose très importante à retenir, bien qu'elle ne vous concernera qu'au chapitre suivant, est que la méthode cloneNode() ne copie malheureusement pas les événements associés et créés avec le DOM (avec addEventListener()), même avec un paramètre à true. Pensez bien à cela !


Remplacer un élément par un autre


Pour remplacer un élément par un autre, rien de plus simple, il y a replaceChild(). Cette méthode accepte deux paramètres : le premier est le nouvel élément, et le deuxième est l'élément à remplacer. Tout comme cloneNode(), cette méthode s'utilise sur tous les types de nœuds (éléments, nœuds textuels, etc.).

Dans l'exemple suivant, le contenu textuel (pour rappel, il s'agit du premier enfant de <a>) du lien va être remplacé par un autre. La méthode replaceChild() est exécutée sur l'élément <a>, c'est-à-dire le nœud parent du nœud à remplacer.

<body>

  <div>

    <p id="myP">Un peu de texte <a>et un lien</a></p>

  </div>

 

  <script>

    var link = document.getElementsByTagName('a')[0];

    var newLabel= document.createTextNode('et un hyperlien');

 

    link.replaceChild(newLabel, link.firstChild);

  </script>

</body>



Supprimer un élément

Pour insérer un élément, on utilise appendChild(), et pour en supprimer un, on utilise removeChild(). Cette méthode prend en paramètre le nœud enfant à retirer. Si on se calque sur le code HTML de l'exemple précédent, le script ressemble à ceci :

var link = document.getElementsByTagName('a')[0];

 

link.parentNode.removeChild(link);


Il n'y a pas besoin de récupérer myP (l'élément parent) avec getElementById(), autant le faire directement avec parentNode.


À noter que la méthode removeChild() retourne l'élément supprimé, ce qui veut dire qu'il est parfaitement possible de supprimer un élément HTML pour ensuite le réintégrer où on le souhaite dans le DOM :

var link = document.getElementsByTagName('a')[0];

 

var oldLink = link.parentNode.removeChild(link); // On supprime l'élément et on le garde en stock

 

document.body.appendChild(oldLink); // On réintègre ensuite l'élément supprimé où on veut et quand on veut


Créé avec HelpNDoc Personal Edition: Environnement de création d'aide complet

Site à deux balles