Info

jQuery way : create a document-fragment of the complex html string (is it appended to the document after creation?) and then modify properties while traversing using jquery methods. Finally its appended to the target element (i hope i am understanding this correctly).

Native js way: The complex dom structure to be created is laid out in a hash first. The hash is then passed through a 'create' method that recursively generates each tag (and its attributes) using native js methods and appends to a document-fragment which is then appended to the target element

Preparation code

<style type="text/css">
  h3{margin: 15px 0 0;color:rgb(120,120,120);}
  li{ margin: 2px 0;overflow: auto; border:1px solid rgb(240,240,240);}
  .left{ float: left;margin:0 5px 0 0; color: gray;}
  .right{float: right; color: orange;}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<h3>Recursive DOM creation</h3>
<ul id="append-native-here">
</ul>

<h3>jQuery DOM creation</h3>
<ul id="append-jquery-here">
</ul>
<script>
  var myApp = {};
  myApp.dom = {
   tag: 'li',
   class: 'selected',
   title: 'A list item',
   content: [{
    tag: 'span',
    text: 'I am a span',
    class: 'left'
   },
   {
    tag: 'span',
    class: 'right',
    text: 'I am a second span'
   },
   {
    tag: 'input',
    type: 'hidden',
    name: 'selector_object[]',
    value: 10
   }]
  };
</script>

Preparation code output

Test runner

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

Java applet disabled.

function _createTag(obj) {
 var tag = document.createElement(obj.tag);
 for (var attr in obj) {
  if (attr !== 'tag' && attr !== 'text' && attr !== 'content') {
   tag.setAttribute(attr, obj[attr]);
  }
  if (attr === 'text') {
   tag.appendChild(document.createTextNode(obj[attr]));
  }
 }
 if (obj.hasOwnProperty('content')) {
  for (var elem = 0, len = obj.content.length; elem < len; elem++) {
   tag.appendChild(_createTag(obj.content[elem]));
  }
 }
 return tag;
} // private create function ends
myApp.create = function(domObj) {
 var fragment = document.createDocumentFragment();
 fragment.appendChild(_createTag(domObj));
 return fragment;
};

document.getElementById('append-native-here').appendChild(myApp.create(myApp.dom));

jQuery("<li><span></span><span></span><input type='hidden'></input></li>").addClass('selected').attr('title', 'A list item').find("span:first-child").addClass("left").html("I am a span").end().find("span:nth-child(2)").addClass("right").text("I am a second span").end().find("input").attr("name", "some_hidden_input").val(10).end().appendTo("#append-jquery-here");

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 Parag on 27th August 2010

2 comments