JSFiddle - React, Tailwind, and code Playground

by dmethvin

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>

<h2>Second good list</h2>
<ul id="second-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
// fix: use appendChild directly
var someFrag = document.createDocumentFragment();

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

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


// 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);

// Alternate workaround
var someUL = $('<ul />');

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

});

$('#second-good-list').append(someUL.children());