添加

[JavaScript] 纯文本查看 复制代码

 createDocumentFragment()    //创建一个DOM片段
<div class='box'> 
    <ul id='ul' > </ul>
</div>

[JavaScript] 纯文本查看 复制代码

/**
*对DOM的操作次数越多，性能消耗也就越大。像这样的循环添加节点，循环了多少次，就对
*DOM操作了多少次，性能消耗明显是不划算的。我们就会想，能否把要插入的节点进行打包，然后一次性
*添加呢？如果可以的话，那就只对DOM做了一次操作了。要实现打包，这就要用到我们的主角 
*createDocumentFragment
*/
//createdocumentfragment()方法创建了一虚拟的节点对象，节点对象包含所有属性和方法。
// 获取页面的ul
var  element  \=  document.getElementById('ul');
// 创建一个document.createDocumentFragment()
//
var  fragment  \=  document.createDocumentFragment();
var  browsers  \= \['Firefox',  'Chrome',  'Opera',
'Safari',  'Internet Explorer'\];
browsers.forEach(function  (browser)  {
var  li  \=  document.createElement('li');
li.textContent  \=  browser;
fragment.appendChild(li);　　// 此处往文档片段插入子节点，不会引起回流 （相当于打包操作）
});
element.appendChild(fragment);　　// 将打包好的文档片段插入ul节点，只做了一次操作

[JavaScript] 纯文本查看 复制代码

2.  createElement()   //创建一个具体的元素

[JavaScript] 纯文本查看 复制代码

let box = document.getElementById('box');
box.appendChild(document.createElement('span'));

[JavaScript] 纯文本查看 复制代码

3.  createTextNode()   //创建一个文本节点
let box = document.getElementById('box');
box.appendChild(document.createTextNode("我是文本"));

添加 移出 替换 插入

[JavaScript] 纯文本查看 复制代码

4.  appendChild()  //添加子节点
5.  removeChild()  //删除子节点
6.  replaceChild()  //替换子节点
7.  insertBefore()  //在已有的子节点前插入一个新的子节点

添加

[JavaScript] 纯文本查看 复制代码

 createDocumentFragment()    //创建一个DOM片段
<div class='box'> 
    <ul id='ul' > </ul>
</div>

[JavaScript] 纯文本查看 复制代码

/**
*对DOM的操作次数越多，性能消耗也就越大。像这样的循环添加节点，循环了多少次，就对
*DOM操作了多少次，性能消耗明显是不划算的。我们就会想，能否把要插入的节点进行打包，然后一次性
*添加呢？如果可以的话，那就只对DOM做了一次操作了。要实现打包，这就要用到我们的主角 
*createDocumentFragment
*/
//createdocumentfragment()方法创建了一虚拟的节点对象，节点对象包含所有属性和方法。
// 获取页面的ul
var  element  \=  document.getElementById('ul');
// 创建一个document.createDocumentFragment()
//
var  fragment  \=  document.createDocumentFragment();
var  browsers  \= \['Firefox',  'Chrome',  'Opera',
'Safari',  'Internet Explorer'\];
browsers.forEach(function  (browser)  {
var  li  \=  document.createElement('li');
li.textContent  \=  browser;
fragment.appendChild(li);　　// 此处往文档片段插入子节点，不会引起回流 （相当于打包操作）
});
element.appendChild(fragment);　　// 将打包好的文档片段插入ul节点，只做了一次操作

[JavaScript] 纯文本查看 复制代码

2.  createElement()   //创建一个具体的元素

[JavaScript] 纯文本查看 复制代码

let box = document.getElementById('box');
box.appendChild(document.createElement('span'));

[JavaScript] 纯文本查看 复制代码

3.  createTextNode()   //创建一个文本节点
let box = document.getElementById('box');
box.appendChild(document.createTextNode("我是文本"));

添加 移出 替换 插入

[JavaScript] 纯文本查看 复制代码

4.  appendChild()  //添加子节点
5.  removeChild()  //删除子节点
6.  replaceChild()  //替换子节点
7.  insertBefore()  //在已有的子节点前插入一个新的子节点