120

Mam zamiar zastąpić element w DOM. Na przykład istnieje element "A", który chcę zastąpić słowem "SPAN".Jak zamienić element DOM w miejscu za pomocą JavaScript?

Jak mam to zrobić?

2009-05-09 omg

'target.replaceWith (element);' jest nowoczesny (ES5 +) sposób to zrobić – Gibolt

@Gibolt Co DOM spec mieć z ES? Co więcej, nie jest jeszcze częścią standardu DOM, a ES5 wydano 9 lat temu. – destoryer

167

stosując 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>

Źródło

2009-05-09 17:15:41

ten przykład nie działa. Powinieneś umieścić blok skryptu na końcu ciała, aby działał. Ponadto dla zabawy: spróbuj dodać linię [alert (myAnchor.innerHTML)] po operacji. – KooiInc

To jest błąd w pisowni z StackOverflow w anchor innerText – rahul

co jeśli jest to element html root – lisak

var a = A.parentNode.replaceChild(document.createElement("span"), A);

A jest zastąpiona pierwiastek.

Źródło

2009-05-09 17:20:27 Kamarey

Odpowiedź z @Bjorn Tipling w rzeczywistości nie działa. To jest (poprawna!) Odpowiedź dla KooiInc, również poprawna, komentarz. Teraz działa! ;-) Tx do obu! –

A.replaceWith (zakres)

ogólnej postaci:

target.replaceWith(element);

Lepiej/czystsze od poprzedniego sposobu.

Dla Państwa przypadku użycia:

A.replaceWith(span);

Źródło

2016-11-05 23:18:51 Gibolt

+10

Nieobsługiwane w IE11 lub Edge 14 (teraz: 2016-11-16). – jor

Spróbuj użyć zamknięcia Google lub innego transpilera, aby przekonwertować na ES5. Nie powinieneś pisać starego kodu na podstawie obsługi przeglądarki, jeśli masz lepszą, łatwiejszą do utrzymania opcję. – Gibolt

Całkowicie się zgadzam, ale IE11 i Edge 14 nie są stare ... – jor

Jak zamienić element DOM w miejscu za pomocą JavaScript?

Odpowiedz

A.replaceWith (zakres)

Powiązane problemy