3.1 Création d'éléments
Travailler avec le DOM (Document Object Model) ne consiste pas seulement à naviguer parmi les éléments existants, mais aussi à créer de nouveaux éléments, les insérer dans le document et les supprimer. Maintenant, on va examiner différentes méthodes et approches pour créer et supprimer des éléments dans le DOM.
Méthode document.createElement()
La méthode principale pour créer un nouvel élément dans le DOM est document.createElement(). Cette méthode prend le nom de la balise de l'élément qu'on veut créer et renvoie le nouvel élément vide.
Exemple :
const newDiv = document.createElement('div');
Ajout de contenu à l'élément
Après avoir créé un nouvel élément, tu peux le remplir de contenu. Cela peut être du texte, d'autres éléments ou une combinaison des deux.
Exemple :
const newDiv = document.createElement('div');
newDiv.textContent = 'Ceci est un nouvel élément div';
On peut également utiliser la propriété innerHTML pour ajouter du contenu HTML.
Exemple :
const newDiv = document.createElement('div');
newDiv.innerHTML = '<strong>Ceci est un nouvel élément div avec du texte en gras</strong>';
3.2 Insertion d'éléments dans le DOM
L'élément créé doit être ajouté au document. Il existe plusieurs méthodes pour insérer des éléments dans le DOM :
1. Méthode appendChild()
La méthode appendChild() ajoute un élément à la fin de la liste des enfants de l'élément parent spécifié.
Exemple :
<html>
<head>
<title>Document</title>
</head>
<body>
<div>Ceci est un ancien élément div</div>
</body>
</html>
const newDiv = document.createElement('div');
newDiv.textContent = 'Ceci est un nouvel élément div';
const body = document.querySelector('body');
body.appendChild(newDiv);
2. Méthode insertBefore()
La méthode insertBefore() ajoute un élément avant l'élément enfant spécifié de l'élément parent.
Exemple :
<html>
<head>
<title>Document</title>
</head>
<body>
<div>Ceci est un ancien élément div</div>
<p>Ceci est un paragraphe</p>
</body>
</html>
const newDiv = document.createElement('div');
newDiv.textContent = 'Ceci est un nouvel élément div';
const body = document.querySelector('body');
const referenceElement = document.querySelector('p');
body.insertBefore(newDiv, referenceElement);
3. Méthode append()
La méthode append() ajoute un ou plusieurs nœuds ou chaînes de caractères à la fin de la liste des enfants de l'élément parent spécifié.
Exemple :
<html>
<head>
<title>Document</title>
</head>
<body>
<div>Ceci est un ancien élément div</div>
</body>
</html>
const newDiv = document.createElement('div');
newDiv.textContent = 'Ceci est un nouvel élément div';
const body = document.querySelector('body');
body.append(newDiv);
4. Méthode prepend()
La méthode prepend() ajoute un ou plusieurs nœuds ou chaînes de caractères au début de la liste des enfants de l'élément parent spécifié.
Exemple :
<html>
<head>
<title>Document</title>
</head>
<body>
<div>Ceci est un ancien élément div</div>
</body>
</html>
const newDiv = document.createElement('div');
newDiv.textContent = 'Ceci est un nouvel élément div';
const body = document.querySelector('body');
body.prepend(newDiv);
3.3 Clonage d'éléments
La méthode cloneNode() permet de cloner un élément. Le clonage peut être profond (avec copie de tous les éléments enfants) ou superficiel (seulement l'élément lui-même).
Exemple de clonage profond :
<html>
<head>
<style>
div {
padding: 5px;
min-height: 50px;
color: #fff;
border-bottom: 1px solid lightblue;
background: mediumpurple;
}
</style>
<title>Document</title>
</head>
<body>
<div>
Ceci est un élément div
<ul>
<li>Élément 1</li>
<li>Élément 2</li>
<li>Élément 3</li>
</ul>
</div>
</body>
</html>
const originalDiv = document.querySelector('div');
const clonedDiv = originalDiv.cloneNode(true);
document.body.appendChild(clonedDiv);
Exemple de clonage superficiel :
<html>
<head>
<style>
div {
padding: 5px;
min-height: 50px;
color: #fff;
border-bottom: 1px solid lightblue;
background: mediumpurple;
}
</style>
<title>Document</title>
</head>
<body>
<div>
Ceci est un élément div
<ul>
<li>Élément 1</li>
<li>Élément 2</li>
<li>Élément 3</li>
</ul>
</div>
</body>
</html>
const originalDiv = document.querySelector('div');
const clonedDiv = originalDiv.cloneNode(false);
document.body.appendChild(clonedDiv);
L'élément <div> lui-même a été cloné, cela se voit grâce aux styles, mais ses éléments enfants (le nœud texte "Ceci est un élément div" et <ul>) n'ont pas été clonés.
3.4 Suppression d'éléments
1. Méthode removeChild()
La méthode removeChild() supprime un élément enfant de l'élément parent.
Exemple :
<html>
<head>
<title>Document</title>
</head>
<body>
<div>
Ceci est un élément div
<p>Ceci est un paragraphe</p>
</div>
</body>
</html>
const parent = document.querySelector('div');
const child = document.querySelector('p');
parent.removeChild(child);
2. Méthode remove()
La méthode remove() supprime directement un élément du DOM.
Exemple :
<html>
<head>
<title>Document</title>
</head>
<body>
<div>Ceci est un élément div</div>
<p>Ceci est un paragraphe</p>
</body>
</html>
const element = document.querySelector('div');
element.remove();
3. Nettoyage du contenu d'un élément
La méthode innerHTML peut être utilisée pour supprimer tout le contenu d'un élément en lui assignant une chaîne vide.
Exemple :
<html>
<head>
<title>Document</title>
<style>
div {
min-height: 200px;
background: bisque;
}
</style>
</head>
<body>
<div>
Ceci est un élément div
<p>Ceci est un paragraphe</p>
</div>
</body>
</html>
const element = document.querySelector('div');
element.innerHTML = '';
4. Suppression de tous les enfants
Pour supprimer tous les enfants d'un élément, on peut utiliser une boucle ou la méthode innerHTML.
Exemple avec une boucle :
<html>
<head>
<title>Document</title>
</head>
<style>
div {
min-height: 200px;
background: bisque;
}
</style>
<body>
<div>
Ceci est un élément div
<p>Ceci est un paragraphe</p>
<p>Ceci est un paragraphe</p>
<p>Ceci est un paragraphe</p>
</div>
</body>
</html>
const parent = document.querySelector('div');
while (parent.firstChild) {
parent.removeChild(parent.firstChild);
}
Exemple avec innerHTML :
<html>
<head>
<title>Document</title>
<style>
div {
min-height: 200px;
background: bisque;
}
</style>
</head>
<body>
<div>
Ceci est un élément div
<p>Ceci est un paragraphe</p>
<p>Ceci est un paragraphe</p>
<p>Ceci est un paragraphe</p>
<ul>
<li>Élément 1</li>
<li>Élément 2</li>
<li>Élément 3</li>
</ul>
</div>
</body>
</html>
const parent = document.querySelector('div');
parent.innerHTML = '';
GO TO FULL VERSION