Parfois, nous voulons remplacer un élément DOM en place par JavaScript.

Dans cet article, nous verrons comment remplacer un élément DOM en place par JavaScript.

Utilisez la méthode parentNode.replaceChild

Nous pouvons remplacer un élément DOM en place par JavaScript en obtenant le parent de l'élément que nous voulons remplacer.

Ensuite, nous pouvons appeler la replaceChildméthode dessus pour remplacer l'élément à la place de l'élément enfant actuel du parent.

Par exemple, si nous avons le HTML suivant :

<div>
  hello world
</div>

const div = document.querySelector("div");
const span = document.createElement("span");
span.innerHTML = "hello james";
div.parentNode.replaceChild(span, div);

Ensuite, nous créons un span que nous voulons remplacer par div avec document.createElement.

Ensuite, nous définissons le contenu de la plage en définissant la innerHTMLpropriété.

Et enfin, on appelle div.parentNode.replaceChildavec le spanet le divpour remplacer le div par le span.

Maintenant, nous devrions voir "hello james" à la place de "hello world"

Utilisez la méthode replaceWith

Un moyen plus simple de remplacer un élément par un autre consiste à utiliser la replaceWithméthode .

Pour l'utiliser, on écrit :

const div = document.querySelector("div");
const span = document.createElement("span");
span.innerHTML = "hello james";
div.replaceWith(span);

Et nous obtenons le même résultat que l'exemple précédent.

Conclusion

Nous pouvons remplacer un élément DOM en place en récupérant le nœud parent de l'élément que nous voulons remplacer et en appelant replaceChildle nœud parent.

Ou nous pouvons appeler le replaceWithsur l'élément que nous voulons remplacer et passer l'élément que nous voulons remplacer comme argument.

Plus de contenu sur plainenglish.io