jQuery .children().remove(), .empty(), .html() replace elements (v4)

Revision 4 of this benchmark created by jykim on

Description

Tests against - .children().remove() - .empty() - .html('')

When replacing the contents of an element

Preparation HTML

<select class="options">
        <option value="0">Select Old</option>
        <option value="1">First Old</option>
        <option value="2">Second Old</option>
        <option value="3">Third Old</option>
        <option value="4">Fourth Old</option>
        <option value="5">Fifth Old</option>
</select>

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

Setup

var $options = jQuery('select.options');
    var optionHTML = '<option value="0">Select New</option><option value="1">First New</option><option value="2">Second New</option><option value="3">Third New</option><option value="4">Fourth New</option><option value="5">Fifth New</option>';

Test runner

Ready to run.

Testing in
TestOps/sec
.children().remove()
$options.children().remove();
$options.append(optionHTML);
ready
.empty()
$options.empty().append(optionHTML);
ready
.html()
$options.html("").append(optionHTML);
ready

Revisions

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