Setting inner HTML of DIV (v5)

Revision 5 of this benchmark created by David Mark on

Description

Basic DOM operation: setting inner HTML of a DIV element

When context restricts eligible containers to DIV elements, all of the issues (and extra code) fade away. TD's work just fine too. There are reasons that TABLE, TR, etc. don't work in IE. MS invented the innerHTML property and explicitly disallowed TABLE, TR, etc. from using it. There is another API for those. Same for SELECT's.

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
/*
 * Context here is an HTML5 document
 * Appropriate build for this context would exclude XHTML support
 * Next line asserts document will create an HTML DOM
 * There are virtually no documents on the Web that create an XHTML DOM
 *
 */
var API = { disableXmlParseMode:true };
</script>
<script src="//www.cinsoft.net/mylib099-min.js"></script>
<script>
  // For My Library test
  
  var setElementHtml = API.setElementHtml;
  
  // For cross-browser test
  
  // Restricted to subset of elements (e.g. DIV's, TD's)
  // Degrades in IE3 (not a misprint)
  // Replace with more elaborate version when context requires
  
  // NOTE: Use isHostMethod for host method detction
  
  if (document.createElement) {
    var elDiv = document.createElement('div');
  }
  
  if (elDiv && typeof elDiv.innerHTML == 'string') {
    var setHtml = function(el, html) {
      el.innerHTML = html; // That was easy :)
    };
  }
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
My Library
setElementHtml(elDiv, '<em>This is a test</em>');
ready
My Library (OO)
E(elDiv).setHtml('<em>This is a test</em>');
ready
jQuery
jQuery(elDiv).html('<em>This is a test</em>');
ready
Cross-browser
// NOTE: API feature detection normally done once at outset, not in loops

if (setHtml) { // Conditionally defined
  setHtml(elDiv, '<em>This is a test</em>');
} else {
  throw new Error('Abort due to (very) degraded browser'); // IE 3?
}
ready

Revisions

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

  • Revision 1: published by David Mark on
  • Revision 3: published on
  • Revision 5: published by David Mark on