動態創建元素

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

...