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.
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 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.
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 queappendChild()n’accepte que des objets de typeNode; - La méthode
append()peut ajouter plusieurs nœuds et chaines de caractères au contraire deappendChild()qui ne peut ajouter qu’un nœud à la fois ; - La méthode
append()n’a pas de valeur de retour, tandis queappendChild()retourne l’objet ajouté.
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é.
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.
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.
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.
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).
See the Pen
Cours JavaScript 8.4.7 by Pierre (@pierregiraud)
on CodePen.
