html dom节点增删改查

时间：2021-06-26 14:46:13
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style  type="text/css">
div {
border: #b3d4fc 1px solid;
padding: 2px;
margin: 2px;
width: 300px;
height:200px;
        }
#div1 {
background: #ffff00;
        }
#div2 {
background: #ff0000;
        }
#div3 {
background: #0000cc;
        }
#div4 {
background: #b3d4fc;
        }

</style>
</head>
<body>
<script type="text/javascript" src="js/write.js"></script>
<script type="text/javascript">
function creandadd() {
//1.创建文本节点
            var oTextNode=document.createTextNode("新建的文本节点");
//2.得到div1的对象
            var oDiv1=document.getElementById("div1");
//3.将节点添加到div1
            oDiv1.appendChild(oTextNode);
        }

function creandadd1()
        {
//1.添加按钮,创建input节点
            var oInputNode=document.createElement("input");
//2.设置input属性
            oInputNode.type="button";
oInputNode.value="新增的按钮";
//3.得到div1对象
            var oDiv1=document.getElementById("div1");
//4.添加到div1对象中
            oDiv1.appendChild(oInputNode);
        }

function creandadd2() {
//通过另一种方式添加按钮
            //1.获取div1对象
            var oDiv1=document.getElementById("div1");
//2.通过innerhtml
            oDiv1.innerHTML+="<input type='button' value='新按钮'/>";
        }

function deleteNode(){
//1.获取节点
            var oDiv2=document.getElementById("div2");
oDiv2.parentNode.removeChild(oDiv2);
        }

function updateNode() {
//1.获取节点
            var oDiv1=document.getElementById("div1");
var oDiv3=document.getElementById("div3");
//oDiv1.parentNode.replaceChild(oDiv3,oDiv1);
            //2.克隆节点并替换
            var oCopyof=oDiv3.cloneNode(true);  //true克隆其所有子节点
            oDiv1.parentNode.replaceChild(oCopyof,oDiv1);
        }

</script>

<input type="button" value="创建并添加节点" onclick="creandadd2()"/>
<input type="button" value="移除节点" onclick="deleteNode()"/>
<input type="button" value="更改节点" onclick="updateNode()"/>
<div id="div1"></div>
<div id="div2">div演示区域</div>
<div id="div3">节点的增删改查</div>
<div id="div4">just do it</div>
</body>
</html>
标签：

相关文章