Maison > interface Web > js tutoriel > Comment remplacer un élément DOM en place par JavaScript ?

Comment remplacer un élément DOM en place par JavaScript ?

Linda Hamilton
Libérer: 2024-10-27 10:25:03
original
487 Les gens l'ont consulté

How to Replace a DOM Element in Place with JavaScript?

Comment remplacer un élément DOM en place à l'aide de Javascript ?

Le remplacement d'un élément dans le DOM peut être une tâche courante dans le développement Web. Par exemple, vous souhaiterez peut-être remplacer un élément avec un élément. Ceci peut être réalisé en utilisant diverses méthodes, mais l'approche la plus simple et la plus fiable consiste à utiliser la fonction replaceChild().

Utilisation de replaceChild() :

Le replaceChild( ) la fonction vous permet de remplacer un élément DOM existant par un nouveau. Il prend deux arguments : le nouvel élément que vous souhaitez insérer et l'élément que vous souhaitez remplacer.

<code class="javascript">// Get the element you want to replace
var elementToReplace = document.getElementById("myAnchor");

// Create the new element
var newElement = document.createElement("span");
newElement.innerHTML = "replaced anchor!";

// Replace the old element with the new one
elementToReplace.parentNode.replaceChild(newElement, elementToReplace);</code>
Copier après la connexion

Cet extrait de code remplacera un (avec l'ID "myAnchor") avec un élément avec le contenu texte "ancre remplacée!". Le nouvel élément est inséré au même emplacement que l'élément d'origine dans l'arborescence DOM.

En utilisant la fonction replaceChild(), vous pouvez modifier efficacement et dynamiquement la structure du balisage de vos pages Web sans recharger l'intégralité de l'élément. document.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal