21 Maj 2019

Tworzenie fragmentów dokumentu

CreateDocumentFragment jest metodą, która tworzy fragment dokumentu, jest to wirtualny dokument. Jest on podobny do diva, ale przy wstawianiu go do dokumentu, wstawiamy jego dzieci.

Gdzie to stosować, tam gdzie zależy Ci na wydajności i danych których wstawiasz jest dużo. Gdy wstawiamy do html nowy element całe drzewo DOM musi być za każdym razem przebudowywane.

const fragment = document.createDocumentFragment();
const ul = document.createElement("ul");

for (let i = 0; i < 10; i += 1) {
  ul.appendChild(document.createElement('li'))
    .appendChild(document.createTextNode("li element " + (i + 1)));
  fragment.appendChild(ul);
}

document.body.appendChild(fragment);
// wynik dostaniemy listę 10 elementów
// lista 1
// ...
// lista 10