Je cherche à remplacer un élément dans le DOM.
Par exemple, il existe un élément <a>
que je souhaite remplacer par un <span>
.
Comment pourrais-je aller 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>
var a = A.parentNode.replaceChild(document.createElement("span"), A);
a est l'élément A remplacé.
A.replaceWith(span)
- Aucun parent requisForme 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);
Navigateurs pris en charge - 86% nov. 2018
Cette question est très ancienne, mais je me suis retrouvée à étudier pour obtenir une certification Microsoft. Dans le cahier d'étude, il était suggéré d'utiliser:
oldElement.replaceNode(newElement)
Je l'ai regardé et cela ne semble être supporté que dans IE. Doh ..
Je pensais que je voudrais juste l'ajouter ici comme une note de côté amusante;)
Exemple de remplacement d'éléments LI
function (element) {
let li = element.parentElement;
let ul = li.parentNode;
if (li.nextSibling.nodeName === 'LI') {
let li_replaced = ul.replaceChild(li, li.nextSibling);
ul.insertBefore(li_replaced, li);
}
}
J'ai eu un problème similaire et j'ai trouvé ce fil. Remplacer n'a pas fonctionné pour moi, et passer par le parent était difficile pour ma situation. Inner Html a remplacé les enfants, ce qui n'était pas ce que je voulais non plus. Avec outerHTML, le travail est fait. J'espère que ceci aide quelqu'un d'autre!
currEl = <div>hello</div>
newElem = <span>Goodbye</span>
currEl.outerHTML = newElem
# currEl = <span>Goodbye</span>
Compte tenu des options déjà proposées, la solution la plus simple sans trouver de parent:
var parent = document.createElement("div");
var child = parent.appendChild(document.createElement("a"));
var span = document.createElement("span");
// for IE
if("replaceNode" in child)
child.replaceNode(span);
// for other browsers
if("replaceWith" in child)
child.replaceWith(span);
console.log(parent.outerHTML);