0

Imagine:

var pai = document.createElement('div');
var filho = document.createElement('div');

Quero que o filho esteja dentro do pai antes de adicioná-lo ao documento. É impossível com pai.appendChild(filho) pois é preciso que pai esteja no documento antes de adicionar um filho, como proceder?

PS: não quero adicionar pai para que assim adicione o filho e depois remover pai salvando o novo formato.

2
  • serve innerHTML em vez de createElement?
    – Costamilam
    Commented 28/02/2018 às 23:19
  • @Guilherme Costamilam, innerHTML serve, mas tenho dúvidas se funcionará
    – Raptador
    Commented 28/02/2018 às 23:50

2 Respostas 2

1

É impossível com pai.appendChild(filho) pois é preciso que pai esteja no documento antes de adicionar um filho

Essa afirmação não é verdadeira.

Pode começar por consultar a documentação, e confirmar que não existe nenhuma menção à afirmação que fez.

No entanto, podemos por o appendChild em código e ver que funciona, adicionando o nó, mesmo quando ambos não estão no DOM:

var pai = document.createElement('div');
var filho = document.createElement('div');

console.log(`Pai tem ${pai.childNodes.length} filhos`); //Pai tem 0 filhos
pai.appendChild(filho);
console.log(`Pai tem ${pai.childNodes.length} filhos`); //Pai tem 1 filhos

for (let i = 0; i < pai.childNodes.length; ++i){
  console.log(`Filho ${i} é ${pai.childNodes[i].tagName}`);
}

Concluindo:

É de facto com a função appendChild que adiciona filhos a nós que não estejam ainda no DOM.

1
  • De fato, curioso, executei a função e não havia funcionado, mas agora funcionou... enfim, muito obrigado1
    – Raptador
    Commented 1/03/2018 às 0:27
0

Exemplo com innerHTML:

document.getElementById ('exemplo').innerHTML = '<div> 1 <div> 2 </div> </div>'

O elemento exemplo pode ser uma div, cuidado, se usar um container com algo dentro o conteúdo será apagado, para adicionar mais conteúdo sem apagar o que ja tem use += em vez de =

1
  • funcionou! obrigado.
    – Raptador
    Commented 1/03/2018 às 0:27

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .