C- Ajouter, modifier ou supprimer des éléments du DOM avec JavaScript
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 Text
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.
Pour insérer du texte dans notre nœud élément, on va pouvoir par exemple utiliser la propriété 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.
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’autres 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.
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).
