¿Cómo reemplazar el elemento DOM en su lugar usando Javascript?

162

Estoy buscando reemplazar un elemento en el DOM.
Por ejemplo, hay un <a>elemento que quiero reemplazar con un <span>lugar.

¿Cómo iría y haría eso?

javascript dom Dios mio
fuente
9
target.replaceWith(element);es la forma moderna (ES5 +) de hacer esto
Gibolt
2
@Gibolt ¿Qué tiene la especificación DOM con ES? Además, todavía no es parte del estándar DOM, mientras que ES5 se lanzó hace 9 años.
pishpish
ES5 + significa ES5 O MÁS TARDE. Incluso si ES5 tiene 9 años, las versiones posteriores NO son tan antiguas.
JustinCB
Si todavía usa StackOverflow, vale la pena elegir la nueva respuesta estándar a continuación.
mikemaccana

Respuestas:

202

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>
Bjorn
fuente
77
Este ejemplo no funcionaría. Debe colocar el bloque de secuencia de comandos 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
8
lo que si es elemento html raíz
Lisak
Gracias @Bjorn Tipling. He creado una pregunta de seguimiento sobre cómo agregar una identificación y una función al elemento reemplazado, aquí: stackoverflow.com/questions/15670261/…
JDelage
65 
var a = A.parentNode.replaceChild(document.createElement("span"), A);

a es el elemento A reemplazado.

Kamarey
fuente
1
La respuesta de @Bjorn Tipling, de hecho, no funciona. Esta es la respuesta (¡correcta!) Para KooiInc, también correcta, comentario. ¡Ahora funciona! ;-) Tx a ambos!
Pedro Ferreira
44
seguramente usted podría han llegado con un nombre de variable distinta de A lol
quemeful
61

A.replaceWith(span) - No se necesitan padres

Forma genérica:

target.replaceWith(element);

Mucho mejor / más limpio que el método anterior.

Para su caso de uso:

A.replaceWith(span);

Documentos de Mozilla

Navegadores compatibles : 94% abril de 2020

Gibolt
fuente
13
No es compatible con IE11 o Edge 14 (ahora: 2016-11-16).
jor
3
Intente usar el Cierre de Google u otro transpilador para convertir a ES5. No debería escribir código antiguo basado en el soporte del navegador, si tiene una opción mejor y más
fácil de
1
Así transpiling. Puede optimizar, minimizar y convertir hacia abajo todo en uno. Compruébalo: developers.google.com/closure/compiler
Gibolt
44
Creo que si la elección es entre usar el código que funciona en todos los navegadores que estoy tratando de admitir, o volver a utilizar todo el proceso de compilación para usar Closure, elegiría el código de uso que funciona en todos los navegadores que estoy tratando de admitir .
cdmckay
55
@jor Estoy de acuerdo en admitir tantos navegadores como sea posible, pero me niego a rehacer mi código solo porque IE o Edge están incompletos o simplemente "quieren ser diferentes". Hay estándares, si no los siguen y algunas personas lo apoyan, ese es su problema, que no tiene que afectarnos como desarrolladores web.
David Tabernero M.
4

Esta pregunta es muy antigua, pero me encontré estudiando para obtener una Certificación de Microsoft, y en el libro de estudio se sugirió usar: 

oldElement.replaceNode(newElement)

Lo busqué y parece que solo es compatible con IE. Doh ..

Pensé que lo agregaría aquí como una nota al margen graciosa;)

Zeliax
fuente
2

Tuve un problema similar y encontré este hilo. Reemplazar no funcionó para mí, y pasar por el padre fue difícil para mi situación. El HTML interno reemplazó a los niños, que tampoco era lo que yo quería. El uso de externalHTML hizo el trabajo. ¡Espero que esto ayude a alguien más!

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

Puede reemplazar un Nodo usando Node.replaceWith(newNode).

Este ejemplo debe mantener todos los atributos y elementos secundarios del nodo de origen:

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
fuente
-1

Ejemplo para reemplazar elementos 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
fuente
-1

Dadas las opciones ya propuestas, la solución más fácil sin encontrar un padre:

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);
Colono usurpador
fuente