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

162

Chcę zamienić element w DOM.
Na przykład istnieje <a>element, który chcę zastąpić <span>zamiast niego.

Jak bym to zrobił?

javascript dom o mój Boże
źródło
9
target.replaceWith(element);to nowoczesny (ES5 +) sposób na zrobienie tego
Gibolt
2
@Gibolt Co ma specyfikacja DOM w ES? Co więcej, nie jest jeszcze częścią standardu DOM, podczas gdy ES5 został wydany 9 lat temu.
pishpish
ES5 + oznacza ES5 LUB PÓŹNIEJ. Nawet jeśli ES5 ma 9 lat, późniejsze wersje NIE są tak stare.
JustinCB
Jeśli nadal korzystasz ze StackOverflow, warto wybrać poniżej nową standardową odpowiedź.
mikemaccana

Odpowiedzi:

202

używają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>
Bjorn
źródło
7
ten przykład nie zadziała. Powinieneś umieścić blok skryptu na końcu ciała, aby działał. Co więcej, dla zabawy: spróbuj dodać wiersz [alert (myAnchor.innerHTML)] po operacji.
KooiInc
Występuje błąd w pisowni ze StackOverflow w kotwicy innerText
rahul
8
co jeśli to główny element html
lisak
Dziękuję @Bjorn Tipling. Utworzyłem kolejne pytanie, jak dodać identyfikator i funkcję do zastępowanego elementu, tutaj: stackoverflow.com/questions/15670261/ ...
JDelage
65 
var a = A.parentNode.replaceChild(document.createElement("span"), A);

a jest zastąpionym elementem A.

Kamarey
źródło
1
Odpowiedź od @Bjorn Tipling w rzeczywistości nie działa. To jest (poprawna!) Odpowiedź na KooiInc, również poprawna, komentarz. Teraz działa! ;-) Tx do obu!
Pedro Ferreira,
4
na pewno mogłeś wymyślić inną nazwę zmiennej niż A lol
quemeful
61

A.replaceWith(span) - Nie potrzeba żadnego rodzica

Formularz ogólny:

target.replaceWith(element);

O wiele lepszy / czystszy niż poprzednia metoda.

W Twoim przypadku użycia:

A.replaceWith(span);

Dokumenty Mozilli

Obsługiwane przeglądarki - 94% kwiecień 2020

Gibolt
źródło
13
Nieobsługiwane w IE11 lub Edge 14 (obecnie: 16.11.2016).
jor
3
Spróbuj użyć Google Closure lub innego transpilera, aby przekonwertować na ES5. Nie powinieneś pisać starego kodu w oparciu o obsługę przeglądarki, jeśli masz lepszą, łatwiejszą w utrzymaniu opcję
Gibolt
1
W ten sposób transpilacja. Możesz optymalizować, minimalizować i konwertować w dół wszystko w jednym. Sprawdź to: developers.google.com/closure/compiler
Gibolt
4
Myślę, że jeśli wybór jest między używaniem kodu, który działa we wszystkich przeglądarkach, które próbuję wspierać, lub ponownym narzędziem całego procesu kompilacji do użycia Closure, wybrałbym kod, który działa we wszystkich przeglądarkach, które próbuję obsługiwać .
cdmckay
5
@jor Zgadzam się obsługiwać tak wiele przeglądarek, jak to tylko możliwe, ale odmawiam przerobienia kodu tylko dlatego, że IE lub Edge są niekompletne lub po prostu „chcą być inne”. Istnieją standardy, jeśli ich nie przestrzegają i kilka osób je popiera, to ich problem, który nie musi wpływać na nas jako twórców stron internetowych.
David Tabernero M.,
4

To pytanie jest bardzo stare, ale zacząłem się uczyć do uzyskania certyfikatu Microsoft, aw książce do nauki sugerowano użycie: 

oldElement.replaceNode(newElement)

Sprawdziłem to i wydaje się, że jest obsługiwany tylko w IE. Doh ..

Pomyślałem, że dodam to tutaj jako zabawną notatkę;)

Zeliax
źródło
2

Miałem podobny problem i znalazłem ten wątek. Wymiana nie działała dla mnie, a wyjazd przez rodzica był trudny w mojej sytuacji. Inner Html zastąpił dzieci, co też nie było tym, czego chciałem. Korzystanie z externalHTML wykonało zadanie. Mam nadzieję, że to pomoże komuś innemu!

currEl = <div>hello</div>
newElem = <span>Goodbye</span>
currEl.outerHTML = newElem
# currEl = <span>Goodbye</span>
Sean
źródło
0

Możesz zamienić węzeł za pomocą Node.replaceWith(newNode).

Ten przykład powinien zachować wszystkie atrybuty i elementy podrzędne z węzła źródłowego:

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
źródło
-1

Przykład wymiany elementów 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);
    }
}
Kirill
źródło
-1

Biorąc pod uwagę już proponowane opcje, najłatwiejsze rozwiązanie bez znalezienia rodzica:

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);
Skwater
źródło