162

Eu estou olhando para substituir um elemento no DOM.
Por exemplo, há um <a>elemento que eu quero substituir por um <span>.

Como eu faria isso?

javascript dom

— AMD
fonte

9

target.replaceWith(element);é o (ES5 +) forma moderna de fazer isso

— Gibolt

2

@ Gibib O que as especificações do DOM têm com o ES? Além disso, ainda não faz parte do padrão DOM, enquanto o ES5 foi lançado há 9 anos.

— pishpish

ES5 + significa ES5 OU MAIS TARDE. Mesmo que o ES5 tenha 9 anos, as versões posteriores NÃO são tão antigas.

— 23918 JustinCB

Se você ainda usa o StackOverflow, vale a pena escolher a nova resposta padrão abaixo.

— Mikemaccana

202

usando 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
fonte

7

este exemplo não funcionaria. Você deve colocar o bloco de scripts no final do corpo para fazê-lo funcionar. Além disso, apenas por diversão: tente adicionar a linha [alert (myAnchor.innerHTML)] após a operação.

— 1060 KooiInc

Há um erro de ortografia com StackOverflow na âncora innerText

— Rahul

8

o que se é elemento html raiz

— lisak

Obrigado @Bjorn Tipling. Eu criei um acompanhamento pergunta sobre como adicionar um id e uma função para o elemento substituído, aqui: stackoverflow.com/questions/15670261/...

— JDelage

65

var a = A.parentNode.replaceChild(document.createElement("span"), A);

a é o elemento A substituído.

— Kamarey
fonte

1

Resposta de @Bjorn Tipling na verdade não funciona. Esta é a resposta (correta!) Para o comentário KooiInc, também correto. Agora funciona! ;-) Tx para ambos!

— Pedro Ferreira

4

certamente você poderia ter vindo acima com um nome de variável diferente de A lol

— quemeful

61

`A.replaceWith(span)` - Nenhum pai é necessário

Forma genérica:

target.replaceWith(element);

Muito melhor / mais limpo que o método anterior.

Para o seu caso de uso:

A.replaceWith(span);

Documentos do Mozilla

Navegadores suportados - 94% abr 2020

— Gibolt
fonte

13

Não há suporte no IE11 ou no Edge 14 (agora: 16/11/2016).

— jor

3

Tente usar o Google Closure ou outro transpiler para converter para o ES5. Você não deveria estar escrevendo código antigo baseado em suporte ao navegador, se você tem uma opção melhor, mais sustentável

— Gibolt

1

Transpilando assim. Você pode otimizar, minificar e converter tudo em um. Confira: developers.google.com/closure/compiler

— Gibolt

4

Acho que se a opção for entre usar código que funcione em todos os navegadores que estou tentando oferecer suporte ou reprocessar todo o processo de compilação para usar o Closure, eu escolheria o código que funcione em todos os navegadores que estou tentando oferecer suporte .

— Cdmckay 16/03

5

Eu concordo em apoiar o maior número possível de navegadores, mas me recuso a refazer o meu código apenas porque o IE ou o Edge estão incompletos ou apenas "querem ser diferentes". Existem padrões, se eles não os seguem e algumas pessoas o apóiam, esse é o problema deles, que não precisa nos afetar como desenvolvedores da web.

— David Tabernero M.

4

Essa pergunta é muito antiga, mas eu me encontrei estudando para uma Certificação Microsoft e, no livro de estudo, foi sugerido o uso:

oldElement.replaceNode(newElement)

Eu procurei e parece ser suportado apenas no IE. Doh ..

Eu pensei em adicioná-lo aqui como uma nota lateral engraçada;)

— Zeliax
fonte

2

Eu tive um problema semelhante e encontrei este tópico. Substituir não funcionou para mim, e passar pelos pais foi difícil para a minha situação. O Html interno substituiu as crianças, o que também não era o que eu queria. O uso do outerHTML fez o trabalho. Espero que isso ajude alguém!

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

— Sean
fonte

0

Você pode substituir um nó usando Node.replaceWith(newNode).

Este exemplo deve manter todos os atributos e filhos do nó de origem:

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
fonte

-1

Exemplo para substituir 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
fonte

-1

Dadas as opções já propostas, a solução mais fácil sem encontrar um pai:

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);

— Squatter
fonte

Como substituir o elemento DOM no lugar usando Javascript?

A.replaceWith(span) - Nenhum pai é necessário

`A.replaceWith(span)` - Nenhum pai é necessário