replaceChild vs. remove/appendChild (v2)

Revision 2 of this benchmark created by cyrilluce on August 2, 2011

Description

Preparation HTML

<div id="adiv"><p id="innerp">p elem</p><span id="innerspan">span elem</span></div>
<div id="viewer-all-new-links">Show: <span class="unselectable link" id="show-new">47 new items</span> - <span class="unselectable link link-selected" id="show-all">all items</span></div><div id="viewer-comments-all-links">Show: <span class="unselectable link link-selected" id="show-commented">Items with comments</span> - <span class="unselectable link" id="show-all-shared">all shared items</span></div><div id="mark-all-as-read-split-button"><div role="wairole:button" tabindex="0" class="goog-button goog-button-base unselectable goog-inline-block goog-button-float-left goog-button-tight viewer-buttons" id="mark-all-as-read"><div class="goog-button-base-outer-box goog-inline-block"><div class="goog-button-base-inner-box goog-inline-block"><div class="goog-button-base-pos"><div class="goog-button-base-top-shadow">&nbsp;</div><div class="goog-button-base-content"><div class="goog-button-body">Mark all as read</div></div></div></div></div></div><div role="wairole:button" tabindex="0" class="goog-button goog-button-base unselectable goog-inline-block goog-button-float-left goog-menu-button goog-button-tight viewer-buttons" id="mark-all-as-read-options"><div class="goog-button-base-outer-box goog-inline-block"><div class="goog-button-base-inner-box goog-inline-block"><div class="goog-button-base-pos"><div class="goog-button-base-top-shadow">&nbsp;</div><div class="goog-button-base-content"><div class="goog-button-body">&nbsp;</div><div class="goog-menu-button-dropdown"></div></div></div></div></div></div></div><div role="wairole:button" tabindex="0" class="goog-button goog-button-base unselectable goog-inline-block goog-button-float-left goog-button-tight viewer-buttons" id="viewer-refresh"><div class="goog-button-base-outer-box goog-inline-block"><div class="goog-button-base-inner-box goog-inline-block"><div class="goog-button-base-pos"><div class="goog-button-base-top-shadow">&nbsp;</div><div class="goog-button-base-content"><div class="goog-button-body">Refresh</div></div></div></div></div></div><div role="wairole:button" tabindex="0" class="goog-button goog-button-base unselectable goog-inline-block goog-button-float-left goog-menu-button goog-button-tight" id="stream-prefs-menu"><div class="goog-button-base-outer-box goog-inline-block"><div class="goog-button-base-inner-box goog-inline-block"><div class="goog-button-base-pos"><div class="goog-button-base-top-shadow">&nbsp;</div><div class="goog-button-base-content"><div class="goog-button-body">Feed settings...</div><div class="goog-menu-button-dropdown"></div></div></div></div></div></div><div id="viewer-toggles"><span id="viewer-allcomments-toggle"><a class="link unselectable">Switch to "Comment view" »</a></span></div><div id="viewer-allcomments-return" class="link unselectable">« Back to "Friends' shared items"</div><div id="viewer-recommendations-return" class="link unselectable">« Back to your recommended feeds</div><span id="viewer-translated-by" class="hidden">Translated by Google - <span class="link" id="viewer-translate-revert-link">View Original</span></span><span id="viewer-single-parent"></span><span id="viewer-single-item-parent"></span><div id="viewer-details-toggle" class="unselectable link">show details</div>
<script>
  var refNode = document.getElementById("viewer-all-new-links");
  function createNewE(){
    return refNode.cloneNode(true);
  }
  var ct = document.getElementById("adiv");
  function rChild() {
    var oldE = ct.lastChild;
    var newE = createNewE();
    ct.replaceChild(newE, oldE);
  }
  function raChild() {
    var oldE = ct.lastChild;
    ct.removeChild(oldE);
    var newE = createNewE();
    ct.appendChild(newE);
  }
  function arChild() {
    var oldE = ct.lastChild;
    var newE = createNewE();
    ct.appendChild(newE);
    ct.removeChild(oldE);
  }
</script>

Test runner

rChild();

raChild();

arChild();

Revisions

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

• Revision 1: published on June 9, 2011
• Revision 2: published by cyrilluce on August 2, 2011
• Revision 3: published on February 9, 2013