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

num. | Ligne | texte | copie |
CTRL+C pour copier, CTRL+V pour coller
1
const element = document.createElement(tagName);
const element = document.createElement(tagName);

Permet de créer un élément.

num. | Ligne | texte | copie |
CTRL+C pour copier, CTRL+V pour coller
1
const element = document.createElement("div");
const element = document.createElement("div");

Crée une variable element contenant un noeud div

DéfinitioncreateTextNode

num. | Ligne | texte | copie |
CTRL+C pour copier, CTRL+V pour coller
1
const contenu = document.createTextNode(value);
const contenu = document.createTextNode(value);

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

num. | Ligne | texte | copie |
CTRL+C pour copier, CTRL+V pour coller
1
const contenu = document.createTextNode("bonjour");
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.

num. | Ligne | texte | copie |
CTRL+C pour copier, CTRL+V pour coller
1
parent.appendChild(child);
parent.appendChild(child);

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

num. | Ligne | texte | copie |
CTRL+C pour copier, CTRL+V pour coller
1
<body>
2
</body>
<body>
</body>
num. | Ligne | texte | copie |
CTRL+C pour copier, CTRL+V pour coller
1
const parent = document.createElement("div");
2
const contenu = document.createTextNode("bonjour");
3
parent.appendChild(contenu);
4
document.body.appendChild(parent);
const parent = document.createElement("div");
const contenu = document.createTextNode("bonjour");
parent.appendChild(contenu);
document.body.appendChild(parent);

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

num. | Ligne | texte | copie |
CTRL+C pour copier, CTRL+V pour coller
1
<body>
2
  <div>
3
    Bonjour
4
  </div>
5
</body>
<body>
  <div>
    Bonjour
  </div>
</body>

DéfinitioninsertBefore

num. | Ligne | texte | copie |
CTRL+C pour copier, CTRL+V pour coller
1
parent.insertBefore(newElement, referenceElement);
parent.insertBefore(newElement, referenceElement);

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

num. | Ligne | texte | copie |
CTRL+C pour copier, CTRL+V pour coller
1
<body>
2
  <ul>
3
    <li>Un</li>
4
    <li>Deux</li>
5
    <li>Trois</li>
6
  </ul>
7
</body>
<body>
  <ul>
    <li>Un</li>
    <li>Deux</li>
    <li>Trois</li>
  </ul>
</body>
num. | Ligne | texte | copie |
CTRL+C pour copier, CTRL+V pour coller
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);
const ul = document.querySelector("ul");
const li2 = ul.querySelector("li:nth-of-type(2)");
const newLi = document.createElement("li");
ul.insertBefore(newLi, li2);
num. | Ligne | texte | copie |
CTRL+C pour copier, CTRL+V pour coller
1
<body>
2
  <ul>
3
    <li>Un</li>
4
    <li></li>
5
    <li>Deux</li>
6
    <li>Trois</li>
7
  </ul>
8
</body>
<body>
  <ul>
    <li>Un</li>
    <li></li>
    <li>Deux</li>
    <li>Trois</li>
  </ul>
</body>

DéfinitionnodeValue

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

num. | Ligne | texte | copie |
CTRL+C pour copier, CTRL+V pour coller
1
<div>bonjour</div>
<div>bonjour</div>

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

num. | Ligne | texte | copie |
CTRL+C pour copier, CTRL+V pour coller
1
const noeudTexte = document.querySelector('div').firstChild;
2
noeudTexte.nodeValue = 'salut';
const noeudTexte = document.querySelector('div').firstChild;
noeudTexte.nodeValue = 'salut';

Ajoute au premier div le texte salut.

num. | Ligne | texte | copie |
CTRL+C pour copier, CTRL+V pour coller
1
<div>bonjoursalut</div>
<div>bonjoursalut</div>

Définitionappend

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

num. | Ligne | texte | copie |
CTRL+C pour copier, CTRL+V pour coller
1
parent.append(child1, child2, 'du texte', child3...);
parent.append(child1, child2, 'du texte', child3...);
num. | Ligne | texte | copie |
CTRL+C pour copier, CTRL+V pour coller
1
<body>
2
</body>
<body>
</body>
num. | Ligne | texte | copie |
CTRL+C pour copier, CTRL+V pour coller
1
const element = document.createElement("p");
2
document.body.append(element, 'Bonjour');
const element = document.createElement("p");
document.body.append(element, 'Bonjour');

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

num. | Ligne | texte | copie |
CTRL+C pour copier, CTRL+V pour coller
1
<body>
2
  <p></p>
3
  Bonjour
4
</body>
<body>
  <p></p>
  Bonjour
</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é.

num. | Ligne | texte | copie |
CTRL+C pour copier, CTRL+V pour coller
1
<ul>
2
  <li>Un</li>
3
  <li>Deux</li>
4
</ul>
<ul>
  <li>Un</li>
  <li>Deux</li>
</ul>
num. | Ligne | texte | copie |
CTRL+C pour copier, CTRL+V pour coller
1
ul = document.querySelector('ul');
2
li = ul.firstElementChild;
3
ul.appendChild(li);
4
ul = document.querySelector('ul');
li = ul.firstElementChild;
ul.appendChild(li);

Ce qui donne :
num. | Ligne | texte | copie | 
CTRL+C pour copier, CTRL+V pour coller
1
<ul>
2
  <li>Deux</li>
3
  <li>Un</li>
4
</ul>
<ul>
  <li>Deux</li>
  <li>Un</li>
</ul>