javascript как добавить новые элементы списка на страницу, для чего нужен createDocumentFragment

Пример у нас в html коде есть пустой список ul

<ul>
</ul>

Как с помощью js кода добавить новые динамеческие сгенерированные элементы li:

var docFrag = document.createDocumentFragment();
for (var i = 0, newEl, newText; i<5; ++i) {
   newEl = document.createElement("li");
   newText = document.createTextNode(i);
   newEl.appendChild (newText);
   docFrag.appendChild (newEl);
}
document.querySelector ("ul").appendChild(docFrag);

Тут использован метод createDocumentFragment для того, чтобы уменьшить нагрузку на браузер. Если его не ставить, то при каждом добавлении элемента li браузеру бы пришло заново строить ДОМ. А так он построит DOM всего лишь один раз.