當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

节点操作-创建并添加删除节点替换克隆节点

發布時間：2025/3/20 编程问答 14 豆豆

生活随笔收集整理的這篇文章主要介紹了节点操作-创建并添加删除节点替换克隆节点小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

<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">
//創建并添加節點
//需求：在div_1節點中添加一個文本節點
function crtAndAdd(){
/*
*1、創建一個文本節點。
*2、獲取div_1節點。
*3、將文本節點添加到div_1節點中。
*/

//1、創建節點。使用Document中的createTextNode方法
var oTextNode = document.createTextNode("這是一個新的文本");

//2、獲取div_1節點
var oDivNode = document.getElementById("div_1");

//3、將文本節點添加到div_1節點中。
oDivNode.appendChild(oTextNode);

}

//需求：在div_1中創建并添加一個按鈕節點。
function crtAndAdd2(){
//1、創建一個按鈕節點
var oButNode = document.createElement("input");
oButNode.type = "button";
oButNode.value="一個新按鈕";

//2、獲取div_1節點
var oDivNode = document.getElementById("div_1");

//3、將文本節點添加到div_1節點中。
oDivNode.appendChild(oButNode);
}

//通過另一種方式完成添加按鈕
function crtAndAdd3(){
/*
*其實是使用了容器型標簽中的一個屬性。innerHTML
*這個屬性可以設置html文本
*/

//1、獲取div_1節點
var oDivNode = document.getElementById("div_1");

oDivNode.innerHTML = "<input type='button' value='有個按鈕' />";
oDivNode.innerHTML ="<a href='http://www.baidu.com'>有個超鏈接</a>";
}

//需求將div_2節點刪除
function delNode(){
//1、獲取div_2節點。
var oDivNode = document.getElementById("div_2");

//2、使用div節點的removeNode方法刪除
//oDivNode.removeNode(true); PS:較少用

//一般使用removerChild方法。刪除子節點。
//獲取div_2的父節點，然后在用父節點的removeChild，將div_2刪除。
oDivNode.parentNode.removeChild(oDivNode);
}

//需求：用div_3節點替換div_1節點。
function updateNode(){
/*
*獲取節點div_1和div_3
*使用replaceNode進行替換
*/
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節點。
//其實就是對div_3進行克隆
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="創建并添加節點" οnclick="crtAndAdd3()" />
<input type="button" value="刪除節點" οnclick="delNode()" />
<input type="button" value="修改節點" οnclick="updateNode()" />
<input type="button" value="克隆節點" οnclick="cloneDemo()" />
<div id="div_1">

</div>
<div id="div_2">
好好學習，day day up!
</div>
<div id="div_3">
div區域演示文字
</div>
<div id="div_4">
節點的增刪該查
</div>

</body>

轉載于:https://www.cnblogs.com/aineko/p/3778724.html

總結

以上是生活随笔為你收集整理的节点操作-创建并添加删除节点替换克隆节点的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。