Sto cercando di sostituire un elemento nel DOM. Ad esempio, c'è un elemento "A" che voglio sostituire con uno "SPAN".Come sostituire l'elemento DOM in posizione utilizzando Javascript?
Come potrei andare e farlo?
utilizzando 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>
questo esempio non funzionerebbe. Dovresti mettere il blocco di script alla fine del corpo per farlo funzionare. Inoltre, solo per divertimento: prova ad aggiungere la riga [alert (myAnchor.innerHTML)] dopo l'operazione. – KooiInc
C'è un errore di ortografia con StackOverflow nell'ancoraggio innerText – rahul
e se si tratta dell'elemento html root – lisak
var a = A.parentNode.replaceChild(document.createElement("span"), A);
a è l'sostituito Un elemento.
Risposta da @Bjorn Tipling infatti non funziona. Questa è la risposta (corretta!) Per KooiInc, anche corretta, commento. Ora funziona! ;-) Tx ad entrambi! –
forma generica:
target.replaceWith(element);
Modo migliore/più pulito rispetto al metodo precedente.
Per il vostro caso d'uso:
A.replaceWith(span);
Non supportato in IE11 o Edge 14 (ora: 16-11-2016). – jor
Prova a utilizzare Google's Closure o un altro transpiler per convertire in ES5. Non dovresti scrivere un vecchio codice basato sul supporto del browser, se hai un'opzione migliore, più manutenibile, – Gibolt
Totalmente d'accordo, ma IE11 e Edge 14 non sono vecchi ... – jor
target.replaceWith (elemento) ',' è la (ES5 +) modo moderno di fare questo – Gibolt
@Gibolt Cosa DOM spec avere con ES? Inoltre, non fa ancora parte dello standard DOM, mentre ES5 è stato rilasciato 9 anni fa. – destoryer