Je cherche à remplacer un élément dans le DOM.
Par exemple, il existe un <a> que je veux remplacer par un élément <span> à la place.
Comment pourrais-je faire ça ?
En utilisant replaceChild() :
<html>
<head>
</head>
<body>
<div>
<a id="myAnchor" href="http://www.stackoverflow.com">StackOverflow</a>
</div>
<script type="text/JavaScript">
var myAnchor = document.getElementById("myAnchor");
var mySpan = document.createElement("span");
mySpan.innerHTML = "replaced anchor!";
myAnchor.parentNode.replaceChild(mySpan, myAnchor);
</script>
</body>
</html>
Cet exemple ne fonctionnerait pas. Vous devriez mettre le bloc script à la fin du corps pour que cela fonctionne. En outre, juste pour le plaisir : essayez d'ajouter la ligne [alert(myAnchor.innerHTML)] après l'opération.
A.replaceWith(span) - Aucun parent n'est nécessaireForme générique :
target.replaceWith(element)Bien meilleur/plus propre que la méthode précédente.
Pour votre cas d'utilisation :
A.replaceWith(span)... ).Exemples :
// Initially [child1, target, child3]
target.replaceWith(span, "foo") // [child1, span, "foo", child3]
const list = ["bar", span]
target.replaceWith(...list, "fizz") // [child1, "bar", span, "fizz", child3]null cibleSi votre cible a une chance d'être nulle, vous pouvez envisager d'utiliser la nouvelle fonction ?. chaînage facultatif opérateur. Rien ne se passera si la cible n'existe pas. Lire la suite aquí .
target?.replaceWith?.(element)child.before y child.after
parent.prepend y parent.append
Navigateurs pris en charge - 95 % octobre 21
Essayez d'utiliser Closure de Google ou un autre transpilateur pour convertir en ES5. Vous ne devriez pas écrire du vieux code basé sur le support du navigateur, si vous avez une meilleure option, plus facile à maintenir.
Ainsi, le transpilage. Vous pouvez optimiser, minifier et réduire la conversion en une seule opération. Regardez ça : développeurs.google.fr/fermeture/compilateur
Cette question est très ancienne, mais je me suis retrouvé à étudier pour une certification Microsoft, et dans le livre d'étude il était suggéré d'utiliser :
oldElement.replaceNode(newElement)J'ai vérifié et il semble qu'il ne soit supporté que par IE. Doh
J'ai pensé l'ajouter ici comme une note latérale amusante ;)
J'ai eu un problème similaire et j'ai trouvé ce fil de discussion. Replace ne fonctionnait pas pour moi, et le fait de passer par le parent était difficile dans ma situation. Inner Html remplaçait les enfants, ce qui n'était pas non plus ce que je voulais. L'utilisation de outerHTML a permis de faire le travail. J'espère que cela aidera quelqu'un d'autre !
currEl = <div>hello</div>
newElem = <span>Goodbye</span>
currEl.outerHTML = newElem
# currEl = <span>Goodbye</span> Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
17 votes
target.replaceWith(element);est la façon moderne (ES5+) de faire ceci2 votes
@Gibolt Qu'est-ce que la spécification DOM a avec ES ? De plus, il ne fait pas encore partie de la norme DOM, alors que ES5 a été publié il y a 9 ans.
1 votes
ES5+ signifie ES5 OR LATER. Même si l'ES5 a 9 ans, les versions ultérieures ne sont pas aussi anciennes.
0 votes
Si vous utilisez toujours StackOverflow, cela vaut la peine de choisir la nouvelle réponse standard ci-dessous.