js 动态添加dom结构

//创建一个碎片文档对象
var fragment = document.createDocumentFragment();
//定义一个变量p
var p;
for (var i = 0; i < 20; i++) {
  //创建一个p元素
  p = document.createElement('p');
  //指定p元素的类
  p.className = 'test';
  //指定p元素中的显示内容
  p.innerHTML = '<p>'+ i + '</p>';
  //将p元素添加到碎片文档中
  fragment.appendChild(p);
}
//将碎片文档渲染到body节点下
document.body.appendChild(fragment);

demo:https://github.com/TigerCui/jsDemo/tree/master/DynamicCreationDom