Ajouter

Pour ajouter un élément au DOM, il faut d'abord créer l'élément et ensuite l'ajouter à l'arborescence.

DéfinitioncreateElement

1
const element = document.createElement(tagName);

Permet de créer un élément.

1
const element = document.createElement("div");

Crée une variable element contenant un noeud div

DéfinitioncreateTextNode

1
const contenu = document.createTextNode(value);

Permet de créer un nœud texte qui contient le texte value.

1
const contenu = document.createTextNode("bonjour");

Crée une variable contenu contenant un nœud texte avec le mot bonjour.

DéfinitionappendChild

Pour le moment, les éléments créés ne sont pas dans le DOM.

Il faut les ajouter à l'arborescence en partant de leur parent.

1
parent.appendChild(child);

Permet d'insérer l'élément child comme dernier enfant de l'élément parent.

1
<body>
2
</body>
1
const parent = document.createElement("div");
2
const contenu = document.createTextNode("bonjour");
3
parent.appendChild(contenu);
4
document.body.appendChild(parent);

Ajoute un div qui contient le texte bonjour à la fin du body.

1
<body>
2
  <div>
3
    Bonjour
4
  </div>
5
</body>

DéfinitioninsertBefore

1
parent.insertBefore(newElement, referenceElement);

Permet d'insérer newElement avant referenceElement dans parent.

1
<body>
2
  <ul>
3
    <li>Un</li>
4
    <li>Deux</li>
5
    <li>Trois</li>
6
  </ul>
7
</body>
1
const ul = document.querySelector("ul");
2
const li2 = ul.querySelector("li:nth-of-type(2)");
3
const newLi = document.createElement("li");
4
ul.insertBefore(newLi, li2);
1
<body>
2
  <ul>
3
    <li>Un</li>
4
    <li></li>
5
    <li>Deux</li>
6
    <li>Trois</li>
7
  </ul>
8
</body>

DéfinitionnodeValue

nodeValue permet de récupérer ou modifier la valeur d'un nœud texte.

1
<div>bonjour</div>

le nœud texte est le premier enfant du nœud div.

1
const noeudTexte = document.querySelector('div').firstChild;
2
noeudTexte.nodeValue = 'salut';

Ajoute au premier div le texte salut.

1
<div>bonjoursalut</div>

Définitionappend

append permet d'ajouter plusieurs éléments en même temps.

1
parent.append(child1, child2, 'du texte', child3...);
1
<body>
2
</body>
1
const element = document.createElement("p");
2
document.body.append(element, 'Bonjour');

Ajoute un p et le texte bonjour à la fin du body.

1
<body>
2
  <p></p>
3
  Bonjour
4
</body>

AttentionDéplacer

Si l'élément que vous ajouter au DOM avec appendChild ou append est un élément qui était déjà dans le DOM. Celui-ci est déplacé.

1
<ul>
2
  <li>Un</li>
3
  <li>Deux</li>
4
</ul>
1
ul = document.querySelector('ul');
2
li = ul.firstElementChild;
3
ul.appendChild(li);
4
Ce qui donne :
1
<ul>
2
  <li>Deux</li>
3
  <li>Un</li>
4
</ul>
ComplémentInnerHTML, textContent
Pour récupérer le contenu d'un élément, on peut utiliser innerHTML et textContent.
1
<p>Je suis en <b>gras</b>, pas moi.</p>
1
const p = document.querySelector('p');
2
const texte1 = p.textContent; // "Je suis en gras, pas moi." 
3
const texte2 = p.innerHTML; // "Je suis en <b>gras</b>, pas moi." 
4
const texte3 = p.firstChild.nodeValue; // "Je suis en "
5