过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);
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='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" />
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
js保留两位小数的方法
加载移除js与css文件步骤详解
p5.js实现烟花绽放效果
以上就是有关js文档碎片添加元素的详细讲解（图文教程）的详细内容。