动态创建元素

Question

I'm currently working on several Apps that include AJAX calls and I'm using JSON format to retrieve data from the server. Each page needs to create content based on the JSON response, and I'm currently creating the content like:

function createBox1(json) {
   var bigbox = document.createElement('div');
   bigbox.className = 'class1';

   var firstbox = document.createElement('div');
   firstbox.className = 'first-box';

      var firstNestedBox = document.createElement('div');
      var secondNestedBox = document.createElement('div');
      var thirdNestedBox = document.createElement('div');
   var secondbox = document.createElement('div');
...

So basically its kinda a long code and I wanted to know if there is a better way to do it.

PS: I have seen some libraries where they do something like:

function o(t,e){var i=document.createElement(t||"div"),o;for(o in e)i[o]=e[o];return i}

and I suppose that's how they create multiple div elements, but I'm not sure how does that works.

Thanks in Advance (:

Answer 1

There's nothing wrong with the way you're doing it, but it's faster to just clone an empty div instead of creating new ones, and it's faster to use a fragment when building markup, and then insert the fragment in the DOM once everything is built instead of inserting each element in the DOM etc.

Just for making shorter code, a function could be used, but it's really just an uneccessary function call:

function createBox1(json) {
   var div             = document.createElement('div'),
       bigbox          = div.cloneNode(false),
       firstbox        = div.cloneNode(false),
       firstNestedBox  = div.cloneNode(false),
       secondNestedBox = div.cloneNode(false),
       thirdNestedBox  = div.cloneNode(false),
       secondbox       = div.cloneNode(false):

   bigbox.className = 'class1';
   firstbox.className = 'first-box';

...