outerHTML vs jQuery clone hack (v3)

Revision 3 of this benchmark created by bminch on

Preparation HTML

<div id="test">
  <p>
    foo
  </p>
  <p>
    bar
  </p>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>

Setup

(function($) {
        $.fn.getHTML= function(){
        var txt, ax, el= document.createElement("div"),
            who = $(this)[0];
        el.appendChild(who.cloneNode(false));
        txt= el.innerHTML;
            ax= txt.indexOf('>')+1;
            txt= txt.substring(0, ax)+who.innerHTML+ txt.substring(ax);
        el= null;
        return txt;
    }
    })(jQuery);

Test runner

Ready to run.

Testing in
TestOps/sec
outerHTML
var x = document.getElementById('test').outerHTML;
ready
jQuery Clone-then-Wrap
var x = $('#test').clone().wrap('<p>').parent().html();
ready
jQuery create-and-append
var x = $('<p/>').append($('#test').clone()).html()
ready
Vanilla JS plugin
var x = $('#test').getHTML();
ready

Revisions

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