动态创建元素

Question

我目前正在使用多个包含AJAX调用的应用程序，并且正在使用JSON格式从服务器检索数据。 每个页面都需要根据JSON响应创建内容，而我目前正在创建类似以下内容的内容：

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');
...

所以基本上它有点长的代码，我想知道是否有更好的方法可以做到这一点。

PS：我看过一些库，它们在其中执行以下操作：

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

我想这就是他们创建多个div元素的方式，但是我不确定这是如何工作的。

提前致谢 （：

Answer 1

这样做的方式没有什么问题，但是克隆一个空的div而不是创建一个新的div更快，并且在构建标记时使用片段，然后在构建完所有内容后将片段插入DOM更快而不是在DOM等中插入每个元素。

只是为了编写较短的代码，可以使用一个函数，但这实际上只是一个不必要的函数调用：

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';

...