HTML DOM Document createDocumentFragment() na paraan

Definisyon at paggamit

createDocumentFragment() Ang paraan ay gumawa ng offscreen na node.

Ang offscreen na node ay maaaring gamitin upang gumawa ng bagong dokumentong fragment na pwedeng idagdag sa anumang dokumento.

createDocumentFragment() Ang paraan ay maaari din gamitin upang kahit anong bahagi ng dokumento ay makuha, baguhin, idagdag o alisin ang ilang nilalaman, at ibalik sa dokumento.

Mga tagubilin

Maaari din itong gamitin upang kahit anong bahagi ng dokumento ay makuha, baguhin, idagdag o alisin ang ilang nilalaman, at ibalik sa dokumento.

Maaari mong direktang i-edit ang HTML na elemento. Subalit mas mabuti ang gumawa ng (offscreen) na dokumentong fragment at idagdag ang fragment sa tunay (aktibong) DOM kapag handa na. Dahil dinadagdag mo ang fragment kapag handa na, kailangan lang ng isang pag-ayos at isang pag-render.

Kung gusto mong idinagdag ang mga HTML na elemento sa loop, maaaring magbigay ng mas mabuting pagganap ang paggamit ng dokumentong fragment.Babala:

Ang mga dokumentong node na idinagdag sa dokumentong fragment ay mabuwag mula sa orihinal na dokumento.

Mga halimbawa

Halimbawa 1

Idinagdag ang elemento sa kasalukuyang listahan:
const fruits = ["Banana", "Orange", "Mango"];
// Nilikha ang dokumentong fragment:
const dFrag = document.createDocumentFragment();
// Idinagdag ang li na elemento sa fragment:
  for (let x in fruits) {
  const li = document.createElement('li');
  li.textContent = fruits[x];
dFrag.appendChild(li);
}
// Idinagdag ang fragment sa listahan:

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

Idinagdag ang elemento sa walang nilalaman na listahan:

Halimbawa 2

Idinagdag ang elemento sa kasalukuyang listahan:
const fruits = ["Banana", "Orange", "Mango"];
// Nilikha ang dokumentong fragment:
const dFrag = document.createDocumentFragment();
// Idinagdag ang li na elemento sa fragment:
  for (let x in fruits) {
  const li = document.createElement('li');
  li.textContent = fruits[x];
dFrag.appendChild(li);
}
// Idinagdag ang fragment sa listahan:

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

Subukan nang personal

Grammar

document.createDocumentFragment()

Parametro

Wala.

Uri Paglalarawan
Node Ang bagong nilikha na DocumentFragment na walang mga anak na node.

Suporta ng browser

document.createComment() Ang DOM Level 1 (1998) na katangian.

Ang lahat ng mga browser ay sumusuporta dito:

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