insertAdjacentHTML vs jQuery append (v4)

Revision 4 of this benchmark created on September 23, 2013

Preparation HTML

<script src="//code.jquery.com/jquery-2.0.3.min.js">
</script>
<ul id="menu"> </ul>

Setup

var $menu = $("#menu");
    var menu = document.getElementById("menu");
    
    var $html = $("<li>new element</li>")
    var html = "<li>new element</li>"

Test runner

for (var i = 0; i < 100; i++) {
  $menu.append($html)
}
menu.innerHTML = ""

for (var i = 0; i < 100; i++) {
  menu.insertAdjacentHTML("beforeend", html)
}
menu.innerHTML = ""

for (var i = 0; i < 100; i++) {
  menu.innerHTML += html;
}
menu.innerHTML = ""

Revisions

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

• Revision 1: published by pedro on December 1, 2012
• Revision 3: published by Jonatas Miguel on September 23, 2013
• Revision 4: published on September 23, 2013
• Revision 5: published on December 23, 2013
• Revision 6: published by Heavensrevenge on December 24, 2013