有关JS文档碎片添加元素的详细讲解（图文教程）

过JS 操作DOM节点可能以节点为单位进行,比如添加节点,可以createElement, createTextNode,然后用 appendChild把文本节点和容器节点绑定在一起,然后再用 appendChild或insertBefor添加到DOM树中.但如果要往DOM树中动态添加大量的节点.就会很麻烦.

例如:

var arrText = ["one","two","three","four","five","six","seven","eight","nine","ten"];
for(var i = 0;i<arrText.length;i++){
    var oP = document.createElement("p");
    var oText = document.createTextNode(arrText[i]);
    oP.appendChild(oText);
    document.body.appendChild(oP);
}

这段代码调用了十次document.body.appendChild(),每次都要产生一次页面刷新.很麻烦.所以可以用"文档碎片 ":

var arrText = ["one","two","three","four","five","six","seven","eight","nine","ten"];
var oFragment = document.createDocumentFragment();
for(var i = 0;i<arrText.length;i++){
    var oP = document.createElement("p");
    var oText = document.createTextNode(arrText[i]);
    oP.appendChild(oText);
    oFragment.appendChild(oP);
}
document.body.appendChild(oFragment);

1. function appendError (id, str) {  
           var spanNew = document.createElement("span" ); // 创建span 
           spanNew.id = id + "span" ; // 生成spanid 
           spanNew.style.color = "red" ;  
           spanNew.appendChild(document.createTextNode(str));// 给span添加内容 
           var inputId = document.getElementById(id);  
           inputId.parentNode.insertBefore(spanNew, inputId.nextSibling);// 给需要添加元素后面添加span 
   //如果需要在前面添加改成就可以了 
   inputId.parentNode.insertBefore(spanNew, inputId);// 给需要添加元素后面添加span 
       }

<script type="text/javascript"><!--
function $(nodeId) 
{ 
return document.getElementById(nodeId); 
} 
function $Name(tagName) 
{ 
return document.getElementsByTagName(tagName); 
}
function replaceMsg() 
{ 
var newNode = document.createElement("P");//创建一个P标签 
newNode.innerHTML = "<font color=&#39;red&#39;>替换后的文字</font>"; 
var oldNode = $Name("P")[0];//获取body里面第一个p元素 
oldNode.parentNode.replaceChild(newNode,oldNode);//直接替换了标签 
}
function removeMsg() 
{ 
var node = $("p2");//p标签 
var nodeBtn = $("remove");//按钮 
//node.parentNode.removeChild(node); //下面效果相同 
document.body.removeChild(node);//在body中删除id为P2的元素 
//nodeBtn.parentNode.removeChild(nodeBtn);//删除该按钮 
document.body.removeChild(nodeBtn); 
//document.body.removeNode();执行这条语句将清空body里面的任何元素 
}
function addbefore() 
{ 
var newNode = document.createElement("p");//创建P标签 
//var newText = document.createTextNode("前面添加的元素"); 
//newNode.appendChild(newText);//与下面效果一样 
newNode.innerHTML = "<font color=&#39;red&#39;>前面添加的元素</font>";//书写P标签里面的内容 
var oldNode = $("p3");//目标标签 
//document.body.insertBefore(newNode,oldNode); 
oldNode.parentNode.insertBefore(newNode,oldNode);//在目标标签前面 添加元素 
}
function addlast() 
{ 
var newNode = document.createElement("p");//创建P标签 
//var newText = document.createTextNode("后面添加的元素"); 
//newNode.appendChild(newText);//与下面效果一样 
newNode.innerHTML = "<font color=&#39;red&#39;>后面添加的元素</font>"; 
var oldNode = $("p3");
oldNode.appendChild(newNode); 
//document.body.appendChild(newNode);//如果使用该方法,则在body的最后添加元素 
}
window.onload = function addArrayMsg() 
{ 
var arrayMsg = [&#39;one&#39;,&#39;two&#39;,&#39;three&#39;,&#39;four&#39;,&#39;five&#39;];//创建数组 
var fragment = document.createDocumentFragment();//创建文档片段 
var newNode ; 
for (var i=0 ;i<arrayMsg.length ;i++ ) 
{ 
newNode = document.createElement("P");//创建P标签 
var nodeText = document.createTextNode(arrayMsg[i]);//创建文本标签,value为数组里面的值 
newNode.appendChild(nodeText);// 
fragment.appendChild(newNode);//把P标签追加到fragment里面 
} 
document.body.appendChild(fragment);//把fragment追加到body里面 
}
function addRow() 
{ 
var tab = $("myTable"); 
//tab.createCaption().innerHTML="<font color=&#39;red&#39;>我的表格</font>"; 
var oldTr = $("handleTr"); 
var newTr = tab.insertRow();//创建一行 
var newTd1 = newTr.insertCell();//创建一个单元格 
var newTd2 = newTr.insertCell();//创建一个单元格 
newTd1.innerHTML = "<input type=&#39;checkbox&#39; />"; 
newTd2.innerHTML = "<input type=&#39;text&#39; />";
}
function removeRow() 
{ 
var tab = $("myTable"); 
// if(tab.rows.length>0){ 
// tab.deleteRow(); 
// if(tab.rows.length==1) 
// tab.deleteCaption(); 
// }
var cbbox ; 
for(var i=0;i<tab.rows.length;i++){ 
cbbox = tab.rows[i].childNodes[0].childNodes[0];//获取input元素 
if(cbbox.checked){
tab.deleteRow(i--); 
} 
} 
}
//全选 
function selAll(value){ 
var items = document.all.tags("input");//获取页面上所有的input元素 
for(var i = 0;i<items.length;i++){ 
if(items[i].type=="checkbox"){//判断类型是否为checkbox 
items[i].checked = value.checked; 
} 
} 
}
function getInputValue() 
{ 
var inputArray = new Array();//创建一个数组 
var tab = $("myTable"); 
var tbInput; 
for(var i=0;i<tab.rows.length;i++){ 
tbInput = tab.rows[i].childNodes[1].childNodes[0].value; 
if(tbInput!=""&&tbInput!=null) 
inputArray.push(tbInput); 
} 
inputArray = inputArray.join("*^&");//默认以","号连接 
$("showValue").value = inputArray; 
} 
var x =&#39;10+20&#39;; 
("alert(x);") 
// --></script> 
</head> 
<body> 
<p id="p1">Hello World! 
<input type="button" value="替换内容" onclick="replaceMsg();" /> 
<p id="p2">我可以被删除! 
<input type="button" id="remove" value="删除它" onclick="removeMsg();" /> 
<p id="p3">在我上下添加一个元素吧！ 
<input type="button" id="addbefore" value="前面添加" onclick="addbefore();" /> 
<input type="button" id="addlast" value="后面添加" onclick="addlast();" /> 
<div style="border:1px solid blue;height:300px"> 
<table id="myTable" cellpadding="0" cellspacing="0" border="1px solid blue" style="padding:4px;" style="padding:4px;"> 
</table> 
<input type="checkbox" onclick="selAll(this);" /> 
<input type="button" value="添加一行" id="addRow" onclick="addRow();" /> 
<input type="button" value="删除一行" id="removeRow" onclick="removeRow();" />
<textarea rows="5" cols="25" id="showValue" />

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

js保留两位小数的方法

加载移除js与css文件步骤详解

p5.js实现烟花绽放效果

以上是有关JS文档碎片添加元素的详细讲解（图文教程）的详细内容。更多信息请关注PHP中文网其他相关文章！