Detailed explanation of adding elements to JS document fragments (graphic tutorial)

viaJS The operation of DOM nodes may be performed in node units, such as adding nodes, you can createElement, createTextNode, then use appendChild to bind the text node and the container node together, and then use appendChild or insertBefor to add it to the DOM tree. But if It will be very troublesome to dynamically add a large number of nodes to the DOM tree.

##For example:

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);
}

This code calls document.body.appendChild() ten times, which causes a page refresh each time. It is very troublesome. So you can use "DocumentFragments ":

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);

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" />

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.
Related articles:

jsMethod to retain two decimal places


Load and removejsDetailed explanation of steps with css files


p5.jsAchieve fireworks blooming effect


The above is the detailed content of Detailed explanation of adding elements to JS document fragments (graphic tutorial). For more information, please follow other related articles on the PHP Chinese website!