realistic innerHTML vs. appendChild vs jQuery.append() (v25)

Revision 25 of this benchmark created by slikts on

Preparation HTML

<div id="result" style="display:none;" />

    <script src="//slikts.github.io/ecmaquery/src/polyfill.js"></script>
    <script src="//slikts.github.io/ecmaquery/src/core.js"></script>
    <script src="//slikts.github.io/ecmaquery/src/util.js"></script>
    <script src="//slikts.github.io/ecmaquery/src/dom.js"></script>
    <script src="//slikts.github.io/ecmaquery/src/fn/dom.js"></script>
    <script src="//slikts.github.io/ecmaquery/src/select.js"></script>
    <script src="//slikts.github.io/ecmaquery/src/fn/select.js"></script>
    <script src="//slikts.github.io/ecmaquery/src/data.js"></script>
    <script src="//slikts.github.io/ecmaquery/src/fn/data.js"></script>
    <script src="//slikts.github.io/ecmaquery/src/css.js"></script>
    <script src="//slikts.github.io/ecmaquery/src/fn/css.js"></script>
<script>
  var el = document.getElementById("result");
var $e = ecmaQuery;
  var $eqEl = $e(el);

</script>


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

<script>
var $j = jQuery.noConflict();
var $jqEl = $j(el);
</script>

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

<script>
var $j2 = jQuery.noConflict();
var $jqEl2 = $j2(el);
</script>

<script src="http://zeptojs.com/zepto.min.js"></script>

<script>

var $z = Zepto;
var $zEl = $z(el);
</script>

<script src="http://kaste.untu.ms/tire.min.js"></script>

<script>

var $t = tire;
var $tEl = $t(el);
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
ecmaQuery.append()
//remove any child elements, since setting innerHTML will also do so
$eqEl.empty();
$eqEl.append($e('<strong>').text('Some html here'));
$eqEl.append($e('<p>').text('Lorem ipsum'));
$eqEl.append($e('<div>').append($e('<ul>').append($e('<li>').text('List').append($e('<li>').text('Item')))));
ready
appendChild
var frag = document.createDocumentFragment(),
    sT = document.createTextNode('Some html here'),
    s = document.createElement("strong"),
    pT = document.createTextNode('Lorem ipsum'),
    p = document.createElement("p"),
    d = document.createElement("div"),
    u = document.createElement("ul"),
    l1T = document.createTextNode('List'),
    l1 = document.createElement("li"),
    l2T = document.createTextNode('Item'),
    l2 = document.createElement("li");
s.appendChild(sT);
frag.appendChild(s);
p.appendChild(pT);
frag.appendChild(p);
l1.appendChild(l1T);
u.appendChild(l1);
l2.appendChild(l2T);
u.appendChild(l2);
d.appendChild(u);
frag.appendChild(u);
//remove any child elements, since setting innerHTML will also do so
while (el.firstChild) {
  el.removeChild(el.firstChild);
}
el.appendChild(frag);
ready
innerHTML
var html = '<strong>Some html here</strong><p>Lorem ipsum</p><div><ul><li>List</li><li>Item</li></ul></div>';
el.innerHTML = html;
ready
jQuery.append()
//remove any child elements, since setting innerHTML will also do so
$jqEl.empty();
$jqEl.append($j('<strong>').text('Some html here'));
$jqEl.append($j('<p>').text('Lorem ipsum'));
$jqEl.append($j('<div>').append($j('<ul>').append($j('<li>').text('List').append($j('<li>').text('Item')))));
ready
jQuery2.append()
//remove any child elements, since setting innerHTML will also do so
$jqEl2.empty();
$jqEl2.append($j2('<strong>').text('Some html here'));
$jqEl2.append($j2('<p>').text('Lorem ipsum'));
$jqEl2.append($j2('<div>').append($j2('<ul>').append($j2('<li>').text('List').append($j2('<li>').text('Item')))));
ready
Zepto
//remove any child elements, since setting innerHTML will also do so
$zEl.empty();
$zEl.append($z('<strong>').text('Some html here'));
$zEl.append($z('<p>').text('Lorem ipsum'));
$zEl.append($z('<div>').append($z('<ul>').append($z('<li>').text('List').append($z('<li>').text('Item')))));
ready
tirejs
//remove any child elements, since setting innerHTML will also do so
$tEl.empty();
$tEl.append($t('<strong>').text('Some html here'));
$tEl.append($t('<p>').text('Lorem ipsum'));
$tEl.append($t('<div>').append($t('<ul>').append($t('<li>').text('List').append($t('<li>').text('Item')))));
ready

Revisions

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