jquery html("") vs children().remove() (v2)

Revision 2 of this benchmark created on

Description

Tests the performance between jquery.html("") and jquery.children().remove()

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style>#t1 div, #t2 div{width:0px; height:0px; overflow:hidden}</style>
<div id="t1"></div>
<div id="t2"></div>

Setup

var $t1 =  $("#t1");
    for(var x = 0; x < 300; x++){
    var a = $("<div></div>");
    a.append("<div><h1>hello</h1></div>");
    a.append("<div><h1>world<h1></div>");
    a.append("<div><h1>!<h1></div>");
    $t1.append(a);
    }
    
    var $t2 =  $("#t2");
    for(var x = 0; x < 300; x++){
    var a = $("<div></div>");
    a.append("<div><h1>hello</h1></div>");
    a.append("<div><h1>world<h1></div>");
    a.append("<div><h1>!<h1></div>");
    $t2.append(a);
    }

Test runner

Ready to run.

Testing in
TestOps/sec
html("")
$("#t1").html("");
ready
children().remove()
$("#t2").children().remove()
ready

Revisions

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