Documento HTML DOM createDocumentFragment()
Exemplos
Adicionar elementos a uma lista vazia:
const fruits = ["Banana", "Orange", "Mango"];
// Create a document fragment:
const fragment = document.createDocumentFragment();
// Add li elements to the fragment:
for (let x in fruits) {
const li = document.createElement('li');
li.textContent = fruits[x];
dFrag.appendChild(li);
}
// Add fragment to a list:
document.getElementById('myList').appendChild(fragment);
Adicionar elementos a uma lista existente:
const fruits = ["Banana", "Orange", "Mango"];
// Create a document fragment:
const fragment = document.createDocumentFragment();
// Add li elements to the fragment:
for (let x in fruits) {
const li = document.createElement('li');
li.textContent = fruits[x];
dFrag.appendChild(li);
}
// Add fragment to a list:
document.getElementById('myList').appendChild(fragment);
Definição e uso
O createDocumentFragment()método cria um nó fora da tela.
O nó offscreen pode ser usado para construir um novo fragmento de documento que pode ser inserido em qualquer documento.
O createDocumentFragment()método também pode ser usado para extrair partes de um documento, alterar, adicionar ou excluir parte do conteúdo e inseri-lo novamente no documento.
Observação
Você sempre pode editar elementos HTML diretamente. Mas uma maneira melhor é construir um fragmento de documento (fora da tela) e anexar esse fragmento ao DOM real (ao vivo) quando estiver pronto. Como você insere o fragmento quando estiver pronto, haverá apenas um refluxo e uma única renderização.
Se você deseja anexar itens de elementos HTML em loops, o uso de fragmentos de documentos também melhora o desempenho.
Aviso!
Os nós de documento anexados ao fragmento de documento são removidos do documento original.
Sintaxe
document.createDocumentFragment()
Parâmetros
| NENHUM |
Valor de retorno
| Modelo | Descrição |
| Nó | O nó DocumentFragment criado. |
Suporte ao navegador
document.createComment()é um recurso DOM Nível 1 (1998).
É totalmente suportado em todos os navegadores:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 9-11 | Yes | Yes | Yes | Yes |