DocumentFragment use illustration

by Julien Roche

HTML

<ul></ul>

Babel + JSX

// See https://twitter.com/anatudor/status/965838510765862913
// https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment
let ulElement = document.querySelector('ul');
let ulContentElement = document.createDocumentFragment();

['A', 'B', 'C', 'D'].forEach(data => {
	let liElement = document.createElement('li');
  liElement.innerText = data;
  ulContentElement.appendChild(liElement);
});

ulElement.appendChild(ulContentElement);