js_add_remove_node_to_html
添加元素节点或者文本节点到html中,不但要create,还要插入到html中(用appendChild或insertBefore方法) 下面结合实例学习:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd ">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DOM</title>
</head>
<style>
#box{
height:200px;
width:500px;
background:blue;
}
#insertbox{
height:100px;
width:150px;
background:green;
border:1px solid red;
margin:5px 5px 5px 5px;
float:left;
color:yellow;
text-align:center;
}
</style>
<body>
<div id="box"></div>
<script language="javascript" type="text/javascript">
function adddiv(){
var newdiv=document.createElement("div");
newdiv.setAttribute("id","insertbox");
var txt=document.createTextNode("虫虫爱毛毛");
newdiv.appendChild(txt);
var pardiv=document.getElementById("box");
pardiv.appendChild(newdiv);
}
</script>
<input type="button" value="点击用DOM增加一个绿色块" οnclick="adddiv();">
</body>
</html>
解为:
var newdiv=document.createElement("div"); //创建一个div标签
newdiv.setAttribute("id","insertbox"); //为新创建的div增加id属性,属性值:insertbox
var txt=document.createTextNode("虫虫爱毛毛"); //创建一个文本节点
newdiv.appendChild(txt); //把文本节点添加到刚才创建的div节点中
var parentdiv=document.getElementById("box"); //获取父节点
parentdiv.appendChild(newdiv); //给父节点增加刚才创建的子结点
2.下面涉及插入节点位置的讨论
(1)在节点之前插入---insertBefore(2)在节点之后插入---insertAfte
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#flag{
width:400px;
height:400px;
background:blue;
}
.test{
width:80px;
height:80px;
background:yellow;
float:left;
margin:5px 5px 5px 5px;
}
#insert_before{
width:80px;
height:80px;
background:green;
float:left;
margin:5px 5px 5px 5px;
}
#insert_after{
width:80px;
height:80px;
background:red;
float:left;
margin:5px 5px 5px 5px;
}
</style>
</head>
<body>
<div id="flag">
<div class="test" id="test1"></div>
<div class="test" id="test2"></div>
<div class="test" id="test3"></div>
</div>
<script>
var testdiv=document.getElementById("test2")
var before_div=document.createElement("div");
before_div.setAttribute("id","insert_before");
testdiv.parentNode.insertBefore(before_div,testdiv);
function insertAfter(newElement,targetElement){
var parent=targetElement.parentNode;
if(parent.lastChild== targetElement){
parent.appendChild(newElement);
}else{
parent.insertBefore(newElement,targetElement.nextSibling);
}
}
var after_div=document.createElement("div");
after_div.setAttribute("id","insert_after");
insertAfter(after_div,testdiv)
</script> </body>
</html>
解释一下：
<div id="flag">
<div class="test" id="test1"></div>
<div class="test" id="test2"></div>
<div class="test" id="test3"></div>
</div>
<script>
var testdiv=document.getElementById("test2"); //取得test2节点
var before_div=document.createElement("div"); //创建一个div节点
before_div.setAttribute("id","insert_before"); //设置刚创建div的id属性
testdiv.parentNode.insertBefore(before_div,testdiv); //插在test2节点前面
function insertAfter(newElement,targetElement){ //创建在节点后面插入的自定义函数
/*---算法:
*---如果是最后一个节点,那么直接在最后一个节点插入
*---如果不是,在插入节点的后面一个兄弟前插入即可
*---*/
var parent=targetElement.parentNode;
if(parent.lastChild== targetElement){
parent.appendChild(newElement);
}else{
parent.insertBefore(newElement,targetElement.nextSibling);
}
}
var after_div=document.createElement("div"); //再创建一个div节点
after_div.setAttribute("id","insert_after"); //设置刚创建div的id属性
insertAfter(after_div,testdiv); //在test2节点后插入
</script>
2402
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
