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

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

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

A.replaceWith(span) - No se necesitan padres

`A.replaceWith(span)` - No se necesitan padres