700字范文 > 节点操作-创建并添加删除节点替换克隆节点

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

时间：2020-01-25 07:05:36

<head>

<title>DOM增删改查</title>

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>

//创建并添加节点

//需求：在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=''>有个超链接</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>

</div>

好好学习，day day up!

</div>

div区域演示文字

</div>

节点的增删该查

</div>

</body>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。