Estoy buscando reemplazar un elemento en el DOM. Por ejemplo, hay un elemento "A" que quiero reemplazar con un "SPAN" en su lugar.¿Cómo reemplazar el elemento DOM en su lugar usando Javascript?
¿Cómo podría ir y hacer eso?
mediante el uso de 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>
este ejemplo no funcionaría. Debe poner el bloque de scripts al final del cuerpo para que funcione. Además, solo por diversión: intente agregar la línea [alert (myAnchor.innerHTML)] después de la operación. – KooiInc
Hay un error de ortografía con StackOverflow en el ancla innerText – rahul
¿y si es el elemento raíz html – lisak
var a = A.parentNode.replaceChild(document.createElement("span"), A);
A es la sustituye Un elemento.
Respuesta de @Bjorn Tipling, de hecho, no funciona. Esta es la respuesta (¡correcto!) Para KooiInc, también es correcto, comenta. ¡Ahora funciona! ;-) Tx a ambos! –
forma genérica:
target.replaceWith(element);
Mucho mejor/más limpio que el método anterior.
Por su caso de uso:
A.replaceWith(span);
No compatible con IE11 o Edge 14 (ahora: 2016-11-16). – jor
Intenta usar Google Closure u otro transpiler para convertir a ES5. No debe escribir código antiguo basado en el soporte del navegador, si tiene una opción mejor y más fácil de mantener – Gibolt
Totalmente de acuerdo, pero IE11 y Edge 14 no son antiguos ... – jor
'target.replaceWith (elemento);' es la forma moderna (ES5 +) para hacer esto – Gibolt
@Gibolt ¿Qué DOM spec tiene con ES? Además, todavía no forma parte del estándar DOM, mientras que ES5 se lanzó hace 9 años. – destoryer