动态创建元素

我目前正在处理几个包含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元素，但我不知道这是如何工作的。

在此先感谢（：

来源

2013-04-06 Christopher Francisco

这没有什么错，你正在做的方式是，但它的速度更快，只是克隆，而不是创建新的空div，而且速度更快，构建标记时使用一个片段，然后将片段在DOM完成所有建成的，而不是在DOM等

只是为了使短码，可以使用的功能将每一个元素，但它实际上只是一个uneccessary函数调用：

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

...

来源

2013-04-06 19:11:06 adeneo

“使用碎片更快在构建标记时nt“是否意味着将所有内容插入到一个框中，然后将该框附加到DOM？ – 2013-04-06 19:20:50

基本上是的。你创建一个[documentFragment]（https://developer.mozilla.org/en-US/docs/DOM/document.createDocumentFragment）作为你的HTML的容器，当你创建它的时候，你插入一切一个去。由于DOM的变化非常昂贵并且需要时间，所以这是加快事情发展的更好方法之一。 – adeneo 2013-04-06 19:24:06

动态创建元素

回答

相关问题