console
let div = document.getElementById('root')
let frag = document.createDocumentFragment()
for(let i=0; i<100; i++) {
let btn = document.createElement('input')
btn.type = 'button'
btn.value = 'b' + i
btn.index = i + 1
frag.appendChild(btn)
}
div.appendChild(frag)
div.addEventListener('click', function(e) {
if(e.target.nodeName.toLowerCase() === 'input') {
alert(e.target.index)
}
})
let ul = document.getElementById('box');
let frags = document.createDocumentFragment();
for(let i=0; i < 20; i++) {
let li = document.createElement('li');
li.innerHTML=`${i}<em>hi</em>`;
frags.appendChild(li)
}
ul.appendChild(frags)
<div id='root'>
</div>
<ul id='box'></ul>
.ul {
margin: 20px;
background: pink;
}