javascript - 动态创建元素

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

...