JSFiddle - React, Tailwind, and code Playground

HTML

<p>This may still work in IE a couple of hundred elements (though very slowly), but when raising the amount of elements to around ~500, you'll probably already get the "Stop running script" alert.</p>
<label for="amt">Amount of loops: </label><input id="amt" type="text" value="200" /> <button id="start" type="button">Start</button>

<div id="log">
    
</div>

<div class="lonely">
    
</div>

<div id="items">
    
</div>

CSS

input, select, ul, div {
    display: none;  
}

#amt,#start {
    display: inline;  
}
#log {
    display: block; 
}

JavaScript

var log = function() {
    var args = Array.prototype.slice.call(arguments)
    $('#log').append('<p>' + args.join(' ') + '</p>');
}

var benchmarks = {};
var benchmark = function(desc) {
    var val = benchmarks[desc];
    if (!val) {
        log(desc, '-->');
        benchmarks[desc] = new Date().getTime();
    } else {
        log('Time for', desc, ':', (new Date().getTime() - val), ' ms<br/><br/>');
        delete benchmarks[desc];
    }
}

var runTest = function(amt) {
    // Reset benchmarks
    benchmarks = {};
    
    log("<br/>-- START test run with", amt, "loops ->", "total amount of elements = ", (amt * 4), ' --<br/><br/>');

    var $n;
    var $items = $('#items');
    var elems = [];
    benchmark("create elements");
    for (var i = 0; i < amt; i++) {
        elems.push('<ul><li>foo</li></ul>');
        elems.push('<div>hmm</div>');
        elems.push('<input type="hidden" name="hoo' + i + '" /> ')
        elems.push('<select><option value="1">foo</option></select>')
    }
    benchmark("create elements");

    benchmark("add elements to DOM");
    $items.html(elems.join(""));
    benchmark("add elements to DOM");

    benchmark("Test 1");
    $n = $items.find('input');
    log("$('input') elements:", $n.length);
    benchmark("Test 1");

    benchmark("Test 2");
    $n = $items.find('li');
    log("$('li') elements:", $n.length);
    benchmark("Test 2");

    benchmark("Test 3");
    $n = $items.find('li').add('.lonely');
    log("$('li').add('.lonely') elements:", $n.length);
    benchmark("Test 3");
    
    benchmark("Test 4");
    $n = $items.find('li').add('#items div');
    log("$('li').add('div') elements:", $n.length);
    benchmark("Test 4");

    benchmark("Test 5");
    $n = $items.find('input').add('#items select');
    log("$('input').add('select') elements:", $n.length);
    benchmark("Test 5");

    log("-- END test --");
}

$('#start ').bind('click', function() {
    var val = $('#amt ').val();
    runTest(parseInt(val ? val :...