JS 文档碎片 添加元素

简介: 过JS 操作DOM节点可能以节点为单位进行,比如添加节点,可以createElement, createTextNode,然后用 appendChild把文本节点和容器节点绑定在一起,然后再用 appendChild或insertBefor添加到DOM树中.

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) {  
  2.         var spanNew = document.createElement("span" ); // 创建span   
  3.         spanNew.id = id + "span" ; // 生成spanid   
  4.         spanNew.style.color = "red" ;  
  5.         spanNew.appendChild(document.createTextNode(str));// 给span添加内容   
  6.         var inputId = document.getElementById(id);  
  7.         inputId.parentNode.insertBefore(spanNew, inputId.nextSibling);// 给需要添加元素后面添加span   
  8. //如果需要在前面添加改成就可以了   
  9. inputId.parentNode.insertBefore(spanNew, inputId);// 给需要添加元素后面添加span   
  10.     } 

 

 

<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='red'>替换后的文字</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='red'>前面添加的元素</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='red'>后面添加的元素</font>";
var oldNode = $("p3");

oldNode.appendChild(newNode);
//document.body.appendChild(newNode);//如果使用该方法,则在body的最后添加元素
}

window.onload = function addArrayMsg()
{
var arrayMsg = ['one','two','three','four','five'];//创建数组
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='red'>我的表格</font>";
var oldTr = $("handleTr");
var newTr = tab.insertRow();//创建一行
var newTd1 = newTr.insertCell();//创建一个单元格
var newTd2 = newTr.insertCell();//创建一个单元格
newTd1.innerHTML = "<input type='checkbox' />";
newTd2.innerHTML = "<input type='text' />";

}

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 ='10+20';
("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" />

 

 

 


目录
相关文章
|
2月前
|
JavaScript 前端开发 小程序
js将数组中相同的元素进行分组 必看
js将数组中相同的元素进行分组 必看
|
3月前
|
JavaScript 前端开发
JavaScript DOM 操作:如何动态创建和插入元素?
JavaScript DOM 操作:如何动态创建和插入元素?
32 1
|
3月前
|
JavaScript 前端开发
JavaScript DOM 操作:如何选中一个 HTML 元素?有哪些方法?
JavaScript DOM 操作:如何选中一个 HTML 元素?有哪些方法?
29 1
|
2月前
|
JavaScript
如何用js在页面中添加元素?
如何用js在页面中添加元素?
15 0
|
19天前
|
JavaScript 前端开发 容器
 JavaScript 遍历文档生成目录结构
 JavaScript 遍历文档生成目录结构
15 1
|
23天前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——HTML1、H5文本元素
H5+CSS3+JS逆向前置——HTML1、H5文本元素
18 0
|
26天前
|
前端开发 JavaScript API
JavaScript中多种获取数组最后一个元素的策略。
欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚开始学习前端的读者们打造的。无论你是初学者还是有一些基础的开发者,我们都会在这里为你提供一个系统而又亲切的学习平台。我们以问答形式更新,为大家呈现精选的前端知识点和最佳实践。通过深入浅出的解释概念,并提供实际案例和练习,让你逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是最新的前端框架和工具,我们都将为你提供丰富的内容和实用技巧,帮助你更好地理解并运用前端开发中的各种技术。
|
2月前
|
JavaScript 前端开发 Java
小笔记:如何使用代码注释:关于JavaScript与TypeScript 注释和文档的自动生成
小笔记:如何使用代码注释:关于JavaScript与TypeScript 注释和文档的自动生成
90 0
|
2月前
|
JSON JavaScript 前端开发
Danfo.js专题 - 附:Dnotebook(Danfo Notebook)单机资源与汉化文档
Danfo.js专题 - 附:Dnotebook(Danfo Notebook)单机资源与汉化文档
35 0
|
2月前
|
存储 算法 JavaScript

热门文章

最新文章

相关产品

  • 云迁移中心