jquery html() vs replaceWith (v10)

Revision 10 of this benchmark created by i.Nemiro on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="c1_ctl">
<div id="c1" class="ui_widget" style="display:inline-block; margin:0.2em;">        <div class="ui-widget-header ui-corner-top" style="width: 12em; padding: 0.2em;">Rechnung Nr.: 2<span class="ui-icon ui-icon-close" style="float:right;"></span> </div>    <div class="ui-widget-content ui-corner-bottom" style="padding: 0.2em;">        <p>            </p><div style="float:left; vertical-align:middle;"> <input type="checkbox"></div>            <div style="float:left;">                 <div>Kunde: person2</div>                <div>Preis: 2,2€</div>            </div>        <p></p>    </div>   </div>
</div>

Teardown


    jQuery("#c1").replaceWith('<div id="c1" class="ui_widget" style="display:inline-block; margin:0.2em;">        <div class="ui-widget-header ui-corner-top" style="width: 12em; padding: 0.2em;">Rechnung Nr.: 2<span class="ui-icon ui-icon-close" style="float:right;"></span> </div>    <div class="ui-widget-content ui-corner-bottom" style="padding: 0.2em;">        <p>            </p><div style="float:left; vertical-align:middle;"> <input type="checkbox"></div>            <div style="float:left;">                 <div>Kunde: person2</div>                <div>Preis: 2,2€</div>            </div>        <p></p>    </div>   </div>');

Test runner

Ready to run.

Testing in
TestOps/sec
use .html() to replace the content of a wrapper
jQuery("#c1_ctl").html(
'<div class="ui_widget" style="display:inline-block; margin:0.2em;">        <div class="ui-widget-header ui-corner-top" style="width: 12em; padding: 0.2em;">Rechnung Nr.: 10<span class="ui-icon ui-icon-close" style="float:right;"></span> </div>    <div class="ui-widget-content ui-corner-bottom" style="padding: 0.2em;">        <p>            </p><div style="float:left; vertical-align:middle;"> <input type="checkbox"></div>            <div style="float:left;">                 <div>Kunde: person10</div>                <div>Preis: 11€</div>            </div>        <p></p>    </div>   </div>'
);
ready
use .replaceWith() to replace the content
jQuery("#c1").replaceWith(
'<div class="ui_widget" style="display:inline-block; margin:0.2em;">        <div class="ui-widget-header ui-corner-top" style="width: 12em; padding: 0.2em;">Rechnung Nr.: 10<span class="ui-icon ui-icon-close" style="float:right;"></span> </div>    <div class="ui-widget-content ui-corner-bottom" style="padding: 0.2em;">        <p>            </p><div style="float:left; vertical-align:middle;"> <input type="checkbox"></div>            <div style="float:left;">                 <div>Kunde: person10</div>                <div>Preis: 11€</div>            </div>        <p></p>    </div>   </div>'
);
ready
use appendChild
var $c1 = jQuery("#c1");
jQuery(
'<div class="ui_widget" style="display:inline-block; margin:0.2em;">        <div class="ui-widget-header ui-corner-top" style="width: 12em; padding: 0.2em;">Rechnung Nr.: 10<span class="ui-icon ui-icon-close" style="float:right;"></span> </div>    <div class="ui-widget-content ui-corner-bottom" style="padding: 0.2em;">        <p>            </p><div style="float:left; vertical-align:middle;"> <input type="checkbox"></div>            <div style="float:left;">                 <div>Kunde: person10</div>                <div>Preis: 11€</div>            </div>        <p></p>    </div>   </div>'
).insertBefore($c1);
$c1.remove();
ready

Revisions

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