JSFiddle - React, Tailwind, and code Playground

HTML

<h2>Slow list</h2>
<ul id="slow-list">
    
</ul>

<hr />

<h2>Dead list</h2>
<ul id="dead-list">
    
</ul>

<hr />

<h2>Good list</h2>
<ul id="good-list">
    
</ul>

CSS

h2 {
 font-weight: bold;
 margin: 1em 0 0.5em;   
}

JavaScript

// FAKE DATA, could be anything really
var someAjaxData = [
    {
        value : 'apple',
        clickValue : 'red'
    },
    {
        value : 'banana',
        clickValue : 'yellow'
    },
    {
        value : 'pear',
        clickValue : 'green'
    }
];

// EXTREMELY SLOW when used on a large amount of data
$.each(someAjaxData, function(key, data) {
    $('<li>', {
        text : data.value,
        click : function() {
            alert('Hello, my click value is ' + data.clickValue);
        }
    }).appendTo('#slow-list');
});


// PREFERRED OPTION only one DOM manipulation
// WILL NOT WORK NOW
var someFrag = document.createDocumentFragment();

$.each(someAjaxData, function(key, data) {
    $('<li>', {
        text : data.value,
        click : function() {
            alert('Hello, my click value is ' + data.clickValue);
        }
    }).appendTo(someFrag);
});

$('#dead-list').append(someFrag);


// WORKAROUND looks bloody ridiculous
var someFrag = document.createDocumentFragment(),
    someList = document.getElementById('good-list');

$.each(someAjaxData, function(key, data) {
    var someItem = $('<li>', {
        text : data.value,
        click : function() {
            alert('Hello, my click value is ' + data.clickValue);
        }
    });
    
    someFrag.appendChild(someItem[0]);
});

someList.appendChild(someFrag);