HTML innerHTML, append and string test (v2)

Revision 2 of this benchmark created by Paul Grenier on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
var onestring = 0;
var onestringhtml = "";
var addstring = "a";
var addhtml = "<p>a</p>";
var $appendcached = $('#appendcached');
var $appendhtmlcached = $('#appendhtmlcached');
</script>
<div style="display: none;">
 <div id="plusequal"></div>
 <div id="append"></div>
 <div id="appendcached"></div>
 <div id="appendto"></div>
 <div id="onestring"></div>
 <div id="plusequalhtml"></div>
 <div id="appendhtml"></div>
 <div id="appendhtmlcached"></div>
 <div id="appendtohtml"></div>
 <div id="onestringhtml"></div>
 <div id="insertAdjacentHTML"></div>
</div>

Teardown


    if (onestring != 0) {
        document.getElementById('plusequal').innerhHTML = onestring;
    }
    if (onestringhtml != 0) {
        document.getElementById('plusequal').innerhHTML = onestringhtml;
    }

Test runner

Ready to run.

Testing in
TestOps/sec
plusequal
document.getElementById('plusequal').innerhHTML += addstring;
ready
append
$('#append').append(addstring);
ready
append cached
$appendcached.append(addstring);
ready
appendTo
$(addstring).appendTo('#appendto');
ready
onestring
onestring += addstring;
ready
plusequal html
document.getElementById('plusequalhtml').innerhHTML += addstring;
ready
append html
$(addhtml).appendTo('#appendhtml');
ready
append html cached
$appendhtmlcached.append(addhtml);
ready
appendTo html
$(addhtml).append('#appendtohtml');
ready
onestring html
onestringhtml += addhtml;
 
ready
insertAdjacentHTML
document.getElementById("insertAdjacentHTML").insertAdjacentHTML("beforeEnd", addhtml);
ready

Revisions

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