|
(1)document.createElement(tagName)
createElement()用来创建一个元素节点，即 nodeType=1 的节点。其中，tagName 为HTML标签的名称，并将返回一个节点对象。
(2)document.createTextNode(text)
createTextNode()用来创建一个文本节点，即 nodeType=3 的节点。其中，text 为文本节点的内容，并将返回一个节点对象。
(3)document.createComment(comment)
createComment()用来创建一个注释节点，即 nodeType=8 的节点。其中，comment 为注释的内容，并将返回一个节点对象。
(4)document.createDocumentFragment();
createDocumentFragment() 用来创建文档碎片节点。文档碎片节点是若干DOM节点的集合，可以包括各种类型的节点，如 元素节点、文本节点、注释节点 等。文档碎片节点在创建之初是空的，需要向它添加节点。 例如，创建<div>标签如下：
vvarpp = document.createElement("div") //以下代码是用于创建 <div> 元素:
var node=document.createTextNode("这是新段落。");//为 <div> 元素添加文本节点：
pp.appendChild(node); //将文本节点添加到 <div> 元素中：
var element=document.getElementById("div1"); //最后，在一个已存在的元素中添加 p 元素。查找已存在的元素：
element.appendChild(pp); //添加到已存在的元素中
使用 insertBefore() 方法: 将新元素添加到开始位置 <body>
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div> <script>
varpp = document.createElement("div") //以下代码是用于创建 <div> 元素
var node=document.createTextNode("这是新段落。");//为 <div> 元素添加文本节点
pp.appendChild(node); //将文本节点添加到 <div> 元素中
var element=document.getElementById("div1"); //最后，在一个已存在的元素中添加 div 元素。查找已存在的元素：
element.appendChild(pp); //添加到已存在的元素中:
</script>
</body> 另： for(var i=0;i<5;i++) {
var op = document.createElement("span");
var oText = document.createTextNode(i);
op.appendChild(oText);
document.body.appendChild(op);
} //先创建文档碎片
var oFragmeng = document.createDocumentFragment();
for(var i=0;i<10000;i++)
{
var op = document.createElement("p");
var oText = document.createTextNode(i);
op.appendChild(oText);
//先附加在文档碎片中
oFragmeng.appendChild(op);
}
//最后一次性添加到document中
document.body.appendChild(oFragmeng);
===========================================
for(var i = 0 ; i < 10; i ++) {
var p = document.createElement("p");
var oTxt = document.createTextNode("段落" + i);
p.appendChild(oTxt);
document.body.appendChild(p);
}
这段代码运行是没有问题，但是他调用了十次document.body.appendChild()，每次都要产生一次页面渲染。这时碎片就十分有用了：
var oFragment = document.createDocumentFragment();
|
1 2 3 4 5 | for(var i = 0 ; i < 10; i ++) {
var p = document.createElement("p");
var oTxt = document.createTextNode("段落" + i);
p.appendChild(oTxt);
oFragment.appendChild(p);<br>}
|
1 | document.body.appendChild(oFragment);
|
在这段代码中，每个新的<p />元素都被添加到文档碎片中，然后这个碎片被作为参数传递给appendChild()。这里对appendChild()的调用实际上并不是把文档碎片追加到body元素中，而是仅仅追加碎片中的子节点，然后可以看到明显的性能提升，document.body.appenChild()一次替代十次，这意味着只需要进行一个内容渲染刷新。
|
