jQuery vs createElement (v278)

Revision 278 of this benchmark created on

Description

Benchmarks from answer on StackOverflow: http://stackoverflow.com/questions/268490/jquery-document-createelement-equivalent/268520

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

Test runner

Ready to run.

Testing in
TestOps/sec
$('<div>')
var el = $('<div>').attr("id", "aaa").append(
  $('<p>').html('toto titi').addClass("test").attr("test", "test")
).append(
  $('<p>').html('toto titi').addClass("test").attr("test", "test")
).append(
  $('<p>').html('toto titi').addClass("test").attr("test", "test")
).append(
  $('<p>').html('toto titi').addClass("test").attr("test", "test")
);
$("body").append(el);
el.remove();
ready
document.createElement
var el = $(document.createElement("div")).attr("id", "aaa").append(
  $(document.createElement("p")).html('toto titi').addClass("test").attr("test", "test")
).append(
  $(document.createElement("p")).html('toto titi').addClass("test").attr("test", "test")
).append(
  $(document.createElement("p")).html('toto titi').addClass("test").attr("test", "test")
).append(
  $(document.createElement("p")).html('toto titi').addClass("test").attr("test", "test")
);
$("body").append(el);
el.remove();
ready
.append().find(id)
var el = $("body").append("<div id='aaa'><p class='test' test='test'>toto titi</p><p class='test' test='test'>toto titi</p><p class='test' test='test'>toto titi</p><p class='test' test='test'>toto titi</p></div>").find("#aaa").remove();
ready
$("<div></div>").appendTo
var el = $("<div id='aaa'><p class='test' test='test'>toto titi</p><p class='test' test='test'>toto titi</p><p class='test' test='test'>toto titi</p><p class='test' test='test'>toto titi</p></div>").appendTo($("body")).remove();
ready
.append().children().last()
var el = $("body").append("<div id='aaa'><p class='test' test='test'>toto titi</p><p class='test' test='test'>toto titi</p><p class='test' test='test'>toto titi</p><p class='test' test='test'>toto titi</p></div>").children().last().remove();
ready

Revisions

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