JSFiddle - React, Tailwind, and code Playground

by jhogervorst

HTML

<div id="result">Running …</div>
<div id="output"></div>

JavaScript

var $result = $('#result'),
result = ["Useragent: " + navigator.userAgent],
$output = $('#output'),
output = document.getElementById('output'),
l = 1000, i,
data = [
    {name: 'Test', email: '[email protected]'},
    {name: 'Person', email: '[email protected]'},
    {name: 'John Doe', email: '[email protected]'}
],
d = new Date();

for (i = l; i--;) {
    var ul = $('<ul />');
    $output.append(ul)
    for (row in data) {
        ul.append($('<li />').append(document.createTextNode(data[row].name + ': ')).append($('<a />').attr('href', 'mailto:' + data[row].email).append(document.createTextNode(data[row].email))));
    }
    $output.empty();
}

result.push("jQuery (append in advance): " + (new Date() - d) + "ms");
d = new Date();

for (i = l; i--;) {
    var ul = $('<ul />');
    for (row in data) {
        ul.append($('<li />').append(document.createTextNode(data[row].name + ': ')).append($('<a />').attr('href', 'mailto:' + data[row].email).append(document.createTextNode(data[row].email))));
    }
    $output.append(ul);
    $output.empty();
}

result.push("jQuery (append afterwards): " + (new Date() - d) + "ms");
d = new Date();

for (i = l; i--;) {
    var ul = output.appendChild(document.createElement('ul'));
    for (row in data) {
        var li = ul.appendChild(document.createElement('li'));
        li.appendChild(document.createTextNode(data[row].name + ': '));
        var a = li.appendChild(document.createElement('a'));
        a.setAttribute('href', 'mailto:' + data[row].email);
        a.appendChild(document.createTextNode(data[row].email));
    }
    $output.empty();
}

result.push("JavaScript (append in advance): " + (new Date() - d) + "ms");
d = new Date();

for (i = l; i--;) {
    var ul = document.createElement('ul');
    for (row in data) {
        var li = document.createElement('li');
        li.appendChild(document.createTextNode(data[row].name + ': '));
        var a = document.createElement('a');
        a.setAttribute('href', 'mailto:' +...