Comment remplacer un élément DOM

Étant donné un élément DOM, comment le remplacer par un autre?

Supposons que vous ayez un élément DOM auquel vous avez une référence (peut-être récupéréquerySelector()).

Pour le remplacer par un autre élément DOM, vous pouvez appeler lereplaceWith()méthode sur le premier élément, en passant le deuxième élément comme argument:

const el1 = document.querySelector(/* ... */)
const el2 = document.querySelector(/* ... */)

el1.replaceWith(el2)

Depuis Edge <17 et IE11ne le supporte pas, vous devez le transpiler vers ES5 à l'aide de Babel si vous prévoyez de prendre en charge ces navigateurs.

Une autre solution consiste à rechercher le parent et à utiliser lereplaceChild()méthode, qui est beaucoup plus ancienne et prise en charge par tous les navigateurs:

const el1 = document.querySelector(/* ... */)
const el2 = document.querySelector(/* ... */)

el1.parentNode.replaceChild(el2, el1)

Téléchargez mon gratuitManuel du débutant JavaScript


Plus de didacticiels sur le navigateur: