我目前正在处理几个包含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元素的,但我不确定它是如何工作的。
先谢谢(:
答案 0 :(得分:0)
你的方式没有任何问题,但是克隆空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';
...