Append Array of jQuery Elements (v3)

Revision 3 of this benchmark created on

Preparation HTML

<div id="test"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Setup

let data = [];
    for (let i=0; i<100; i++) {
        data.push(`text ${i}`);
    }
    const test = $('#test');

Teardown


    data = null;
    test.empty();

Test runner

Ready to run.

Testing in
TestOps/sec
Append in each
$.each(data, function(i, s) {
    test.append($('<div>', { text: s}));
});
ready
Convert to list of jQuery elements (map) and append
const elts = data.map(function(s) {
    return $('<div>', { text: s});
});
test.append(elts);
ready
Append to jQuery object
let elts = $();
for (const s of data) {
    elts = elts.add($('<div>', { text: s}));
}
test.append(elts);
ready
Convert to list of jQuery elements (push) and append
const elts = [];
for (const s of data) {
    elts.push($('<div>', { text: s}));
}
test.append(elts);
ready
Append in for
for (const s of data) {
    test.append($('<div>', { text: s}));
}
ready
Append in forEach
data.forEach(function(s) {
    test.append($('<div>', { text: s}));
});
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.