document.getelementid.iinnerhtl vs jquery append

Benchmark created by pnannuru on

Preparation HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<div id="divId" class="divclass">div</div>

Test runner

Ready to run.

Testing in
TestOps/sec
jquery
$(document).ready(function() {

 var insertHtml = '<li class="last"><a href="javascript:;">$LBL_CC_LOAN_MORE</a></li>';
 var $docHTML = $("#divId")
 var li = "";

 for (i = 0; i < 10; i++) {
  li += "<li>This is list item " + i + "</li>";
 }

 $docHTML.append(li);

});
ready
javascript
$(document).ready(function() {

 var insertHtml = '<li class="last"><a href="javascript:;">$LBL_CC_LOAN_MORE</a></li>';
 var $docHTML = $(".divclass")
 var li = "";

 for (i = 0; i < 10; i++) {
  li += "<li>This is list item " + i + "</li>";
 }

 $docHTML.append(li);

});
ready

Revisions

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

  • Revision 1: published by pnannuru on