Kurssivinkki:

HTML DOM Document createDocumentFragment() -menetelmä

Offscreen-sivut voidaan käyttää uuden dokumentin osan rakentamiseen, joka voidaan lisätä mihin tahansa dokumenttiin. Määritelmä ja käyttö

Tämä menetelmä luo offscreen-sivun.

Offscreen-sivut voidaan käyttää uuden dokumentin osan rakentamiseen, joka voidaan lisätä mihin tahansa dokumenttiin. createDocumentFragment()

Tämä menetelmä voidaan käyttää myös dokumentin osan sisällön, muutosten, lisäämisen tai poistamisen poimimiseen ja palauttamiseen dokumenttiin.

Vinkki

Voit aina suoraan muokata HTML-elementtiä. Mutta parempi tapa on rakentaa (offscreen) dokumenttiosa ja lisätä tämä osa valmiina todelliseen (aktiiviseen) DOMiin. Koska lisäät osan valmiina, tarvitset vain yhden uudelleenjärjestelyn ja yhden renderöinnin.

Jos haluat lisätä HTML-elementtejä silmukan sisällä, dokumenttiosa voi parantaa suorituskykyä.Huomioitavaa:

Dokumenttinode, joka lisätään dokumenttiosaan, poistetaan alkuperäisestä dokumentista.

Esimerkki

Esimerkki 1

Lisää elementti olemassa olevaan listaan:
const fruits = ["Banana", "Orange", "Mango"];
// Luo dokumenttiosa:
const dFrag = document.createDocumentFragment();
// Lisää li-elementti osaan:
  for (let x in fruits) {
  const li = document.createElement('li');
  li.textContent = fruits[x];
dFrag.appendChild(li);
}
// Lisää osa dokumenttia listaan:

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

Lisää elementti tyhjään listaan:

Esimerkki 2

Lisää elementti olemassa olevaan listaan:
const fruits = ["Banana", "Orange", "Mango"];
// Luo dokumenttiosa:
const dFrag = document.createDocumentFragment();
// Lisää li-elementti osaan:
  for (let x in fruits) {
  const li = document.createElement('li');
  li.textContent = fruits[x];
dFrag.appendChild(li);
}
// Lisää osa dokumenttia listaan:

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

Kokeile itse

Syntaksi

document.createDocumentFragment()

Parametrit

Ei mitään.

Tyyppi Kuvaus
Sivu Uusisti luodut DocumentFragment-sivut, ilman lapsisivuja.

Selaimen tuki

document.createComment() On DOM Level 1 (1998) ominaisuus.

Kaikki selaimet tukevat sitä:}

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