On peut aussi intéragir avec le DOM en modifiant la position de nos éléments.
insertBefore
Avec la méthode insertBefore, on peut insérer un élément avant un autre élément donné.
const rouge = document.querySelector('.rouge');
const vert = document.querySelector('.vert');
const bleu = document.querySelector('.bleu');
document.body.insertBefore(bleu,vert);
On a inséré l’élément bleu entant qu’enfant de l’élément body juste avant l’élément vert.
appendChild
Avec la méthode appendChild, on peut insérer un élément dans un autre (en dernière position).
const rouge = document.querySelector('.rouge');
const vert = document.querySelector('.vert');
const bleu = document.querySelector('.bleu');
rouge.appendChild(bleu);
On a inséré l’élément bleu dans l’élément rouge.
replaceChild
Avec la méthode replaceChild, on peut remplacer un élément par un autre .
const rouge = document.querySelector('.rouge');
const vert = document.querySelector('.vert');
const bleu = document.querySelector('.bleu');
document.body.replaceChild(bleu,rouge);
On a remplacé l’élément rouge par l’élément bleu.
removeChild
Avec la méthode removeChild, on peut supprimer un élément.
const rouge = document.querySelector('.rouge');
const vert = document.querySelector('.vert');
const bleu = document.querySelector('.bleu');
rouge.parentElement.removeChild(rouge);
On a supprimé l’élément rouge. Il faut être situé sur l’élément parent (de l’élément qu’on supprime) pour utiliser removeChild.
remove
Il y a une autre variante qui n’est pas supportée par tous les navigateurs c’est la méthode remove qui permet de supprimer une élément sans se situer sur l’élément parent.
const rouge = document.querySelector('.rouge');
const vert = document.querySelector('.vert');
const bleu = document.querySelector('.bleu');
vert.remove();
On a supprimé l’élément vert.