Ich möchte ein Element im DOM ersetzen.
Zum Beispiel gibt es ein <a>
Element, das ich <span>
stattdessen durch ein ersetzen möchte .
Wie würde ich das machen?
Ich möchte ein Element im DOM ersetzen.
Zum Beispiel gibt es ein <a>
Element, das ich <span>
stattdessen durch ein ersetzen möchte .
Wie würde ich das machen?
Antworten:
mit 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 ist das ersetzte A-Element.
A.replaceWith(span)
- Kein Elternteil benötigtGenerisches Formular:
target.replaceWith(element);
Viel besser / sauberer als die vorherige Methode.
Für Ihren Anwendungsfall:
A.replaceWith(span);
Unterstützte Browser - 94% Apr 2020
Diese Frage ist sehr alt, aber ich habe für eine Microsoft-Zertifizierung studiert, und im Studienbuch wurde vorgeschlagen, Folgendes zu verwenden:
oldElement.replaceNode(newElement)
Ich habe es nachgeschlagen und es scheint nur im IE unterstützt zu werden. Doh ..
Ich dachte, ich würde es hier nur als lustige Randnotiz hinzufügen;)
Ich hatte ein ähnliches Problem und fand diesen Thread. Ersetzen funktionierte bei mir nicht und es war schwierig für meine Situation, an den Eltern vorbeizukommen. Inner Html ersetzte die Kinder, was ich auch nicht wollte. Mit OuterHTML wurde die Arbeit erledigt. Hoffe das hilft jemand anderem!
currEl = <div>hello</div>
newElem = <span>Goodbye</span>
currEl.outerHTML = newElem
# currEl = <span>Goodbye</span>
Sie können einen Knoten mit ersetzen Node.replaceWith(newNode)
.
In diesem Beispiel sollten alle Attribute und untergeordneten Elemente vom Ursprungsknoten ferngehalten werden:
const links = document.querySelectorAll('a')
links.forEach(link => {
const replacement = document.createElement('span')
// copy attributes
for (let i = 0; i < link.attributes.length; i++) {
const attr = link.attributes[i]
replacement.setAttribute(attr.name, attr.value)
}
// copy content
replacement.innerHTML = link.innerHTML
// or you can use appendChild instead
// link.childNodes.forEach(node => replacement.appendChild(node))
link.replaceWith(replacement)
})
Angesichts der bereits vorgeschlagenen Optionen die einfachste Lösung, ohne einen Elternteil zu finden:
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);
target.replaceWith(element);
ist der moderne (ES5 +) Weg, dies zu tun