节点操作-创建并添加删除节点替换克隆节点
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DOM增刪改查</title>
<style type="text/css">
div{
border:#306 1px solid;
width:200px;
height:30px;
margin:10px;
}
#div_1{
background-color:#00ccff;
}
#div_2{
background-color:#FFccff;
}
#div_3{
background-color:#cc00ff;
}
#div_4{
background-color:#00FF00;
}
</style>
</head>
<body>
<script type="text/javascript">
//創(chuàng)建并添加節(jié)點(diǎn)
//需求：在div_1節(jié)點(diǎn)中添加一個(gè)文本節(jié)點(diǎn)
function crtAndAdd(){
/*
*1、創(chuàng)建一個(gè)文本節(jié)點(diǎn)。
*2、獲取div_1節(jié)點(diǎn)。
*3、將文本節(jié)點(diǎn)添加到div_1節(jié)點(diǎn)中。
*/
//1、創(chuàng)建節(jié)點(diǎn)。使用Document中的createTextNode方法
var oTextNode = document.createTextNode("這是一個(gè)新的文本");
//2、獲取div_1節(jié)點(diǎn)
var oDivNode = document.getElementById("div_1");
//3、將文本節(jié)點(diǎn)添加到div_1節(jié)點(diǎn)中。
oDivNode.appendChild(oTextNode);
}
//需求：在div_1中創(chuàng)建并添加一個(gè)按鈕節(jié)點(diǎn)。
function crtAndAdd2(){
//1、創(chuàng)建一個(gè)按鈕節(jié)點(diǎn)
var oButNode = document.createElement("input");
oButNode.type = "button";
oButNode.value="一個(gè)新按鈕";
//2、獲取div_1節(jié)點(diǎn)
var oDivNode = document.getElementById("div_1");
//3、將文本節(jié)點(diǎn)添加到div_1節(jié)點(diǎn)中。
oDivNode.appendChild(oButNode);
}
//通過(guò)另一種方式完成添加按鈕
function crtAndAdd3(){
/*
*其實(shí)是使用了容器型標(biāo)簽中的一個(gè)屬性。innerHTML
*這個(gè)屬性可以設(shè)置html文本
*/
//1、獲取div_1節(jié)點(diǎn)
var oDivNode = document.getElementById("div_1");
oDivNode.innerHTML = "<input type='button' value='有個(gè)按鈕' />";
oDivNode.innerHTML ="<a href='http://www.baidu.com'>有個(gè)超鏈接</a>";
}
//需求將div_2節(jié)點(diǎn)刪除
function delNode(){
//1、獲取div_2節(jié)點(diǎn)。
var oDivNode = document.getElementById("div_2");
//2、使用div節(jié)點(diǎn)的removeNode方法刪除
//oDivNode.removeNode(true); PS:較少用
//一般使用removerChild方法。刪除子節(jié)點(diǎn)。
//獲取div_2的父節(jié)點(diǎn)，然后在用父節(jié)點(diǎn)的removeChild，將div_2刪除。
oDivNode.parentNode.removeChild(oDivNode);
}
//需求：用div_3節(jié)點(diǎn)替換div_1節(jié)點(diǎn)。
function updateNode(){
/*
*獲取節(jié)點(diǎn)div_1和div_3
*使用replaceNode進(jìn)行替換
*/
var oDivNode_1 = document.getElementById("div_1");
var oDivNode_3 = document.getElementById("div_3");
//oDivNode_1.replaceNode(oDivNode_3);
//建議使用replaceChild
oDivNode_1.parentNode.replaceChild(oDivNode_3,oDivNode_1);
}
//需求：希望用div_3替換div_1，并保留div_3節(jié)點(diǎn)。
//其實(shí)就是對(duì)div_3進(jìn)行克隆
function cloneDemo(){
var oDivNode_1 = document.getElementById("div_1");
var oDivNode_3 = document.getElementById("div_3");
var oCopyDiv_3 = oDivNode_3.cloneNode(true);
//oDivNode_1.replaceNode(oDivNode_3);
//建議使用replaceChild
oDivNode_1.parentNode.replaceChild(oCopyDiv_3,oDivNode_1);
}
</script>
<input type="button" value="創(chuàng)建并添加節(jié)點(diǎn)" οnclick="crtAndAdd3()" />
<input type="button" value="刪除節(jié)點(diǎn)" οnclick="delNode()" />
<input type="button" value="修改節(jié)點(diǎn)" οnclick="updateNode()" />
<input type="button" value="克隆節(jié)點(diǎn)" οnclick="cloneDemo()" />
<div id="div_1">
</div>
<div id="div_2">
好好學(xué)習(xí)，day day up!
</div>
<div id="div_3">
div區(qū)域演示文字
</div>
<div id="div_4">
節(jié)點(diǎn)的增刪該查
</div>
</body>
轉(zhuǎn)載于:https://www.cnblogs.com/aineko/p/3778724.html
總結(jié)
以上是生活随笔為你收集整理的节点操作-创建并添加删除节点替换克隆节点的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 背景透明的 Dialog
- 下一篇： mysql---表所在数据库