Je cherche à remplacer un élément dans le DOM. Par exemple, il y a un élément "A" que je veux remplacer par un "SPAN" à la place.Comment remplacer l'élément DOM en place en utilisant Javascript?
Comment est-ce que je pourrais y aller?
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 de script à la fin du corps pour le faire fonctionner. De plus, juste pour le fun: essayez d'ajouter la ligne [alert (myAnchor.innerHTML)] après l'opération. – KooiInc
Theres une faute d'orthographe avec StackOverflow dans l'ancre innerText – rahul
et si c'est root élément html – lisak
var a = A.parentNode.replaceChild(document.createElement("span"), A);
A représente le remplacement d'un élément.
Réponse de @Bjorn Tipling ne fonctionne pas en fait. C'est la réponse (correcte!) Pour KooiInc, aussi correcte, commentez. Maintenant ça marche! ;-) Tx aux deux! –
de forme générique:
target.replaceWith(element);
Bien mieux/plus propre que la méthode précédente.
Pour votre cas d'utilisation:
A.replaceWith(span);
Non pris en charge dans IE11 ou Edge 14 (maintenant: 2016-11-16). – jor
Essayez d'utiliser Google Closure ou un autre transpiler pour convertir en ES5. Vous ne devriez pas écrire l'ancien code basé sur le support de navigateur, si vous avez une meilleure option, plus maintenable – Gibolt
Tout à fait d'accord, mais IE11 et Edge 14 ne sont pas vieux ... – jor
'target.replaceWith (élément)' est la façon de le faire – Gibolt
@Gibolt moderne (ES5 +) Qu'est-ce que DOM SPEC et 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. – destoryer