0

Estou tentando armazenar em uma var, e depois reinserir no body 3 elementos do tipo "p".

<body>

<p> Um</p>
<p> Dois </p>
<p> Tres </p> ....

Ao fazer isso:

<script>
    var parag = document.querySelectorAll("p");
        document.write(parag);
</script>

O que eu tenho impressos na tela é uma espécie de "rótulo" ou nome da lista de objetos(para o DOM, ou elementos, pro html, correto?) "p":

Imprime assim:

[object NodeList]

Agora, tem como eu buscar esses elementos "p", e efetivamente reimprimir na body o seu conteúdo??

1
  • querySelectorAll devolve um NodeList logo para utilizar cada um dos elementos precisa de um for. Respondi à bem pouco tempo a uma questão muito semelhante à sua se não mesmo duplicada. Veja aqui
    – Isac
    Commented 11/04/2018 às 12:57

1 Resposta 1

1

Ao usar document.querySelectorAll irá gerar um objeto com uma coleção de nós (nodes) dos elementos selecionados no seletor, no seu caso o "p" (tag <p>).

Para reimprimi-los usando document.write você pode usar um laço for pegando o HTML de cada item da coleção com outerHTML. Existem outras formas de inserir os itens na página, mas usando document.write poderia ser desta forma:

var parag = document.querySelectorAll("p");

for(var x=0; x<parag.length; x++){
   document.write(parag[x].outerHTML);
}
<p> Um</p>
<p> Dois </p>
<p> Tres </p>

Você pode também clonar os elementos e ir reinserindo na página usando o método cloneNode:

var parag = document.querySelectorAll("p");
for(var x=0; x<parag.length; x++){
   var clone = parag[x].cloneNode(true); // true quer dizer selecionar tudo do elemento
   document.body.appendChild(clone);
}
<p> Um</p>
<p> Dois </p>
<p> Tres </p>

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 .