Modifier l’ordre des éléments

Section Progression:


 
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.