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

...

动态创建元素

1 个答案: