Info

Tests various DOM construction patterns.

Preparation code

<style>
 .destination {display: none;}
</style>
<div id="destination1" class="destination"></div>
<div id="destination2" class="destination"></div>
<div id="destination3" class="destination"></div>
<div id="destination4" class="destination"></div>
<div id="destination5" class="destination"></div>
<script>
  var content = '<div class="test"><span style="color: red">Wooo Text!</span></div><div>More text!</div>',
      dest1 = document.getElementById("destination1"),
      dest2 = document.getElementById("destination2"),
      dest3 = document.getElementById("destination3"),
      dest4 = document.getElementById("destination4"),
      dest5 = document.getElementById("destination5");
  
  // For Element cloneNode test
  var womb = document.createElement("div");
  womb.innerHTML = content;
  
  // For doc fragment test
  var frag = document.createDocumentFragment(),
      clone = womb.cloneNode(true),
      len = clone.childNodes.length;
  while (len--) {
   frag.appendChild(clone.childNodes[0]);
  }
</script>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

dest1.innerHTML = content;

var clone = womb.cloneNode(true),
    len = clone.childNodes.length;
while (len--) {
 dest2.appendChild(clone.childNodes[0]);
}

dest3.appendChild(frag.cloneNode(true));

var child = document.createElement('div');
child.className = "test";

var subChild = document.createElement('span');
subChild.style.color = "red";
subChild.appendChild(document.createTextNode("Wooo Text!"));
child.appendChild(subChild);
dest4.appendChild(child);


child = document.createElement('div');
child.appendChild(document.createTextNode("More text!"));
dest4.appendChild(child);

var child = document.createElement('div');
dest5.appendChild(child);
child.className = "test";

var subChild = document.createElement('span');
child.appendChild(subChild);
subChild.style.color = "red";
subChild.appendChild(document.createTextNode("Wooo Text!"));

child = document.createElement('div');
dest5.appendChild(child);
child.appendChild(document.createTextNode("More text!"));

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

• Revision 1: published by Kevin Decker on 1st August 2010 and last updated on 2nd August 2010
• Revision 2: published by aavezel on 24th November 2010

0 comments