JSFiddle - React, Tailwind, and code Playground

HTML

<div class="mor"></div>
<div class="mor"></div>
<div class="mor"></div><div class="mor"></div>
<div class="mor"></div>
<div class="mor"></div>
<div class="mor"></div>
<div class="mor"></div>
<div class="mor" id="m"></div>

JavaScript

console.time('each query');
for (let i=0; i < 100000; i++) {
	const m = document.querySelector('#m');
  const x = document.createElement('span');
  m.appendChild(x);
  m.removeChild(x);
}
console.timeEnd('each query');

console.time('cached query');
const m = document.querySelector('#m');
for (let i=0; i < 100000; i++) {
  const x = document.createElement('span');
  m.appendChild(x);
  m.removeChild(x);
}
console.timeEnd('cached query');