Curso optativo

Recomendação de curso:

Método cria nó offscreen. Método HTML DOM Document createDocumentFragment()

Definição e uso

Método cria nó offscreen. Os nós offscreen podem ser usados para construir novos fragmentos de documento que podem ser inseridos em qualquer documento.

createDocumentFragment()

O método pode ser usado para extrair parte do conteúdo do documento, fazer alterações, adicionar ou remover alguns conteúdos e inseri-los de volta ao documento.

Dica

Se você quiser adicionar itens de elementos HTML em um loop, usar o fragmento de documento também pode melhorar o desempenho.Atenção:

Os nós de documento adicionados ao fragmento de documento serão removidos do documento original.

Exemplo

Exemplo 1

Adicionar elementos a uma lista existente:
const fruits = ["Banana", "Orange", "Mango"];
// Crie o fragmento de documento:
const dFrag = document.createDocumentFragment();
// Adicione o elemento li ao fragmento:
  for (let x in fruits) {
  const li = document.createElement('li');
  li.textContent = fruits[x];
dFrag.appendChild(li);
}
// Adicione o fragmento à lista:

document.getElementById('myList').appendChild(dFrag);

Adicionar elementos a uma lista vazia:

Exemplo 2

Adicionar elementos a uma lista existente:
const fruits = ["Banana", "Orange", "Mango"];
// Crie o fragmento de documento:
const dFrag = document.createDocumentFragment();
// Adicione o elemento li ao fragmento:
  for (let x in fruits) {
  const li = document.createElement('li');
  li.textContent = fruits[x];
dFrag.appendChild(li);
}
// Adicione o fragmento à lista:

document.getElementById('myList').appendChild(dFrag);

Experimente você mesmo

Sintaxe

document.createDocumentFragment()

Parâmetros

Nenhum.

Tipo Descrição
Nó Novo nó DocumentFragment criado, sem nós filhos.

Suporte do navegador

document.createComment() É uma característica do DOM Level 1 (1998).

Todos os navegadores suportam:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Suporte 9-11 Suporte Suporte Suporte Suporte