Wie ersetze ich das vorhandene DOM-Element mit Javascript?

162

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?

javascript dom Oh mein Gott
quelle
9
target.replaceWith(element);ist der moderne (ES5 +) Weg, dies zu tun
Gibolt
2
@ Gibolt Was hat die DOM-Spezifikation mit ES? Darüber hinaus ist es noch nicht Teil des DOM-Standards, während ES5 vor 9 Jahren veröffentlicht wurde.
Pishpish
ES5 + bedeutet ES5 ODER SPÄTER. Selbst wenn ES5 9 Jahre alt ist, sind spätere Versionen NICHT so alt.
JustinCB
Wenn Sie StackOverflow weiterhin verwenden, lohnt es sich, die neue Standardantwort unten auszuwählen.
Mikemaccana

Antworten:

202

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>
Björn
quelle
7
Dieses Beispiel würde nicht funktionieren. Sie sollten den Skriptblock am Ende des Körpers platzieren, damit er funktioniert. Außerdem nur zum Spaß: Versuchen Sie, die Zeile [alert (myAnchor.innerHTML)] nach der Operation hinzuzufügen.
KooiInc
Es gibt einen Rechtschreibfehler mit StackOverflow im Anker innerText
rahul
8
Was ist, wenn es Root-HTML-Element ist
Lisak
Vielen Dank, dass Sie @Bjorn Tipling. Ich habe eine Folgefrage zum Hinzufügen einer ID und einer Funktion zum ersetzten Element hier erstellt: stackoverflow.com/questions/15670261/…
JDelage
65 
var a = A.parentNode.replaceChild(document.createElement("span"), A);

a ist das ersetzte A-Element.

Kamarey
quelle
1
Antwort von @Bjorn Tipling funktioniert in der Tat nicht. Dies ist die (richtige!) Antwort für KooiInc, auch richtig, Kommentar. Jetzt gehts! ;-) Tx an beide!
Pedro Ferreira
4
Sicherlich hätten Sie sich einen anderen Variablennamen als A lol
quemeful
61

A.replaceWith(span) - Kein Elternteil benötigt

Generisches Formular:

target.replaceWith(element);

Viel besser / sauberer als die vorherige Methode.

Für Ihren Anwendungsfall:

A.replaceWith(span);

Mozilla Docs

Unterstützte Browser - 94% Apr 2020

Gibolt
quelle
13
Wird in IE11 oder Edge 14 nicht unterstützt (jetzt: 2016-11-16).
jor
3
Versuchen Sie, mit Google Closure oder einem anderen Transpiler auf ES5 zu konvertieren. Sie sollten keinen alten Code basierend auf der Browserunterstützung schreiben, wenn Sie eine bessere, wartbarere Option haben
Gibolt
1
Also transpilieren. Sie können alles in einem optimieren, minimieren und herunterkonvertieren. Überprüfen Sie es heraus: developer.google.com/closure/compiler
Gibolt
4
Ich denke, wenn Sie zwischen Code wählen können, der in allen Browsern funktioniert, die ich unterstützen möchte, oder Ihren gesamten Erstellungsprozess für die Verwendung von Closure umrüsten möchten, würde ich Code verwenden, der in allen Browsern funktioniert, die ich unterstützen möchte .
CDMckay
5
@jor Ich bin damit einverstanden, so viele Browser wie möglich zu unterstützen, aber ich lehne es ab, meinen Code neu zu erstellen, nur weil IE oder Edge unvollständig sind oder einfach "anders sein wollen". Es gibt Standards, wenn sie ihnen nicht folgen und einige Leute sie unterstützen, das ist ihr Problem, das uns als Webentwickler nicht betreffen muss.
David Tabernero M.
4

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;)

Zeliax
quelle
2

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>
Sean
quelle
0

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)
})
Nurul Huda
quelle
-1

Beispiel zum Ersetzen von LI-Elementen

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);
    }
}
Kirill
quelle
-1

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);
Squatter
quelle