Ajouter, modifier ou supprimer des éléments du DOM avec JavaScript

Au cours des leçons précédentes, nous avons vu comment accéder aux différents nœuds du DOM, soit directement soit en se déplaçant de nœuds en nœuds dans le DOM.

Nous allons pouvoir utiliser ces connaissances pour ajouter, modifier, remplacer ou supprimer des nœuds dans le DOM.

 

Créer de nouveaux nœuds et les ajouter dans l’arborescence du DOM

On va pouvoir, en JavaScript, ajouter des éléments dans notre document. Pour cela, il va falloir procéder en deux étapes : on va déjà créer un nouveau nœud puis on va ensuite l’insérer à une certaine place dans le DOM.

Créer un nœud Element ou un nœud Texte

Pour créer un nouvel élément HTML en JavaScript, nous pouvons utiliser la méthode createElement() de l’interface Document.

Cette méthode va prendre en argument le nom de l’élément HTML que l’on souhaite créer.

On crée un noeud DOM Element avec la méthode JavaScript createElement

Nous avons ici créé un nouvel élément p. Celui-ci ne contient pour le moment ni attribut ni contenu textuel, et n’a pas encore été inséré à l’intérieur de notre page à un endroit précis.

Pour insérer du texte dans notre nœud élément, on va pouvoir par exemple utiliser la propriété textContent.

On ajoute du texte dans un noeud DOM Element avec la propriété JavaScript textContent

On peut également créer directement un nœud de type texte en utilisant la méthode createTextNode() de Document et ensuite insérer ce nœud dans un nœud élément avec l’une des méthodes que nous allons voir immédiatement.

On crée un noeud DOM texte avec la méthode JavaScript createTextNode

Insérer un nœud dans le DOM

Il existe différentes méthodes qui nous permettent d’insérer des nœuds dans d’autre nœuds. La différence entre ces méthodes va souvent consister dans la position où le nœud va être inséré.

Nous pouvons déjà utiliser les méthodes prepend() et append() du mixin ParentNode. Ces deux méthodes vont respectivement nous permettre d’insérer un nœud ou du texte avant le premier enfant d’un certain nœud ou après le dernier enfant de ce nœud.

Code hTML support pour exemple d'insertion de noeud dans l'arborescence du DOM en JavaScript

On utilise prepend ou append pour insérer des noeuds dans le DOM en JavaScript

On insère le noeud créé dans le DOM avec les méthodes JavaScript prepend ou append

See the Pen
Cours JavaScript 8.4.1
by Pierre (@pierregiraud)
on CodePen.

On peut également utiliser la méthode appendChild() de l’interface Node qui permet d’ajouter un nœud en tant que dernier enfant d’un nœud parent.

Les différences entre append() de ParentNode et appendChild() de Node sont les suivantes :

  • La méthode append() permet également d’ajouter directement une chaine de caractères tandis que appendChild() n’accepte que des objets de type Node ;
  • La méthode append() peut ajouter plusieurs nœuds et chaines de caractères au contraire de appendChild() qui ne peut ajouter qu’un nœud à la fois ;
  • La méthode append() n’a pas de valeur de retour, tandis que appendChild() retourne l’objet ajouté.

Présentation de la méthode JavaScript appendChild pour insérer un noeud dans le DOM

Exemple d'utilisation de la méthode JavaScript appendChild pour insérer un noeud dans le DOM

See the Pen
Cours JavaScript 8.4.2
by Pierre (@pierregiraud)
on CodePen.

On peut encore utiliser la méthode insertBefore() de l’interface Node qui permet pour sa part d’insérer un nœud en tant qu’enfant d’un autre nœud juste avant un certain nœud enfant donné de ce parent.

Cette méthode va prendre en arguments le nœud à insérer et le nœud de référence c’est-à-dire le nœud juste avant lequel le nœud passé en premier argument doit être inséré.

Présentation de la méthode JavaScript insertBefore pour insérer un noeud dans le DOM

Exemple d'utilisation de la méthode JavaScript insertBefore pour insérer un noeud dans le DOM

See the Pen
Cours JavaScript 8.4.3
by Pierre (@pierregiraud)
on CodePen.

Finalement, nous pouvons aussi utiliser les méthodes insertAdjacentElement(), insertAdjacentText() et insertAdjacentHTML() de l’interface Element pour insérer nos nœuds dans le DOM.

La méthode insertAdjacentElement() insère un nœud élément à une position donnée par rapport à l’élément sur lequel il est appelé.

La méthode insertAdjacentText() insère un nœud texte à une position donnée par rapport à l’élément sur lequel il est appelé.

La méthode insertAdjacentHTML() analyse une chaine de caractères en tant que HTML et insère les nœuds créés avec le balisage donné dans le DOM à une certaine position spécifiée.

Pour chacune de ces trois méthodes, nous allons devoir spécifier la position où on souhaite insérer nos nœuds ainsi que le nœud à insérer en arguments. Pour la position, il faudra fournir l’un des mots clefs suivants :

  • beforebegin : Insère le ou les nœuds avant l’élément ;
  • afterbegin : Insère le ou les nœuds avant le premier enfant de l’élément ;
  • beforeend : Insère le ou les nœuds après le dernier enfant de l’élément ;
  • afterend : Insère le ou les nœuds après l’élément.

Présentation des méthodes JavaScript insertadjacentelement insertadjacenttext et insertadjacenthtml pour insérer un noeud dans le DOM

Exemple d'utilisation des méthodes JavaScript insertadjacentelement insertadjacenttext et insertadjacenthtml pour insérer un noeud dans le DOM

See the Pen
Cours JavaScript 8.4.4
by Pierre (@pierregiraud)
on CodePen.

Note : le mixin ChildNode nous fournit également deux méthodes before() et after() qui permettent d’insérer un nœud avant ou après un certain enfant d’un certain nœud parent. Toutefois, ces deux méthodes sont récentes et ne sont donc pas encore supportées par tous les navigateurs.

 

Déplacer un nœud dans le DOM

Pour déplacer un nœud dans le DOM, on peut utiliser l’une des méthodes appendChild() ou insertBefore() de Node en leur passant en argument un nœud qui existe déjà et qui est déjà placé dans le DOM.

Dans ce cas-là, les méthodes vont déplacer le nœud dans le DOM vers la nouvelle position indiquée.

On utilise la méthode insertBefore pour déplacer un noeud dans le DOM en JavaScript

Exemple d'utilisation de insertBefore en JavaScript pour déplacer un noeud dans le DOM

See the Pen
Cours JavaScript 8.4.5
by Pierre (@pierregiraud)
on CodePen.

 

Cloner ou remplacer un nœud dans le DOM

Pour cloner un nœud, on peut utiliser la méthode cloneNode() de Node qui renvoie une copie du nœud sur lequel elle a été appelée.

Cette méthode prend un booléen en argument. Si la valeur passée est true, les enfants du nœud seront également clonés. Si on lui passe false, en revanche, seul le nœud spécifié sera cloné.

Par défaut, cette méthode copie également le contenu du nœud cloné.

Pour remplacer un nœud, on utilisera plutôt la méthode replaceChild() de cette même interface qui va remplacer un certain nœud par un autre.

Cette méthode va prendre en arguments le nœud de remplacement et le nœud qui doit être remplacé. Notez que si le nœud de remplacement existé déjà dans le DOM, il sera d’abord retiré de son emplacement d’origine.

On peut cloner un noeud du DOM avec la méthode JavaScript cloneNode

On utilise  la méthode JavaScript cloneNode pour cloner un noeud du DOM

See the Pen
Cours JavaScript 8.4.6
by Pierre (@pierregiraud)
on CodePen.

 

Supprimer un nœud du DOM

Pour supprimer totalement un nœud du DOM, on peut déjà utiliser la méthode removeChild() de Node qui va supprimer un nœud enfant passé en argument d’un certain nœud parent de l’arborescence du DOM et retourner le nœud retiré.

On peut également utiliser la méthode remove() du mixin ChildNode() qui permet tout simplement de retirer un nœud de l’arborescence et qui dispose aujourd’hui d’un bon support par les navigateurs (cette façon de faire est plus récente que la précédente).

On utilise la méthode remove ou removeChild en JavaScript pour supprimer un noeud du DOM

On supprime un noeud du DOM avec la méthode JavaScript remove ou removeChild

See the Pen
Cours JavaScript 8.4.7
by Pierre (@pierregiraud)
on CodePen.

Laisser un commentaire