JSFiddle - React, Tailwind, and code Playground

by Niranjan Borawake

HTML

<button onclick="createList()">Create List</button>
<button onclick="createBadList()">Create Bad List</button>
<ul id="list"></ul>
<ul id="bad-list"></ul>

CSS

ul li {
  list-style: none;
  padding: 10px;
  background-color: grey;
}

JavaScript

function createList() {
  var fragment = document.createDocumentFragment();
  var i, li;
  for (i = 0; i < 5000; i++) {
    li = document.createElement('li');
    li.textContent = 'List item No. : ' + (i + 1);
    fragment.appendChild(li);
  }
  document.getElementById('list').appendChild(fragment);
}

function createBadList() {
	var list = document.getElementById('bad-list');
  var i, li;
  for (i = 0; i < 5000; i++) {
    li = document.createElement('li');
    li.textContent = 'List item No. : ' + (i + 1);
    list.appendChild(li);
  }
}