wake-up-neo.com

Wie ersetzt man das DOM-Element mithilfe von Javascript?

Ich suche ein Element im DOM zu ersetzen. 
Beispielsweise gibt es ein <a>-Element, das ich stattdessen durch einen <span> ersetzen möchte.

Wie würde ich das machen?

141
omg

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>
189
Bjorn Tipling
var a = A.parentNode.replaceChild(document.createElement("span"), A);

a ist das ersetzte A-Element.

63
Kamarey

A.replaceWith(span) - Kein Elternteil erforderlich

Generisches Formular:

target.replaceWith(element);

Viel besser/sauberer als die bisherige Methode.

Für Ihren Anwendungsfall:

A.replaceWith(span);

Mozilla Docs

Unterstützte Browser - 86% November 2018

40
Gibolt

Diese Frage ist sehr alt, aber ich habe gerade für eine Microsoft-Zertifizierung studiert, und im Studienbuch wurde vorgeschlagen zu verwenden: 

oldElement.replaceNode(newElement)

Ich habe nachgesehen und scheint nur im IE unterstützt zu werden. Doh ..

Ich dachte, ich würde es hier einfach als lustige Randnotiz hinzufügen;)

3
Zeliax

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

Ich hatte ein ähnliches Problem und fand diesen Thread. Ersetzen hat bei mir nicht funktioniert, und für meine Situation war es schwierig, sich an die Eltern zu wenden. Inneres HTML ersetzte die Kinder, was ich auch nicht wollte. Die Verwendung von OuterHTML hat die Arbeit erledigt. Hoffe das hilft jemand anderem!

currEl = <div>hello</div>
newElem = <span>Goodbye</span>
currEl.outerHTML = newElem
# currEl = <span>Goodbye</span>
0
Sean

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