Append Array of jQuery Elements (v4)

Revision 4 of this benchmark created on

Preparation HTML

<div id="test"></div>
<script
			  src="https://code.jquery.com/jquery-3.7.1.min.js"
			  integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
			  crossorigin="anonymous"></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.