[HTML 5] Using DocumentFragments

DocumentFragment can create virtual dom tree. It can helps to avoid layout reflow.. problems

 

Code has profermance problem:

const data = ['Earth', 'Fire', 'Water', 'Air'];

data.forEach(name => {
  const li = document.createElement('li');
  li.innerText = name;
  app.append(li);
});

 

Instead of each loop, we append one li tag, what we can do is accumlate all the li tags and append into DOM only once.

const data = ['Earth', 'Fire', 'Water', 'Air'];

const fragment = document.createDocumentFragment();

data.forEach(name => {
  const li = document.createElement('li');
  li.innerText = name;
  fragment.append(li);
});

app.append(fragment);