dom_curd.html
<script type="text/javascript">
/*
* 1,创建一个文本节点。
* 2,获取div_1节点。
* 3,将文本节点添加到div_1节点中。
*/
function createAndAdd(){
var textNode=document.createTextNode("新创建的文本");
var divNode=document.getElementById("div_1");
divNode.appendChild(textNode);
}
//在div_1中创建一个button
function createAndAdd2(){
//创建按钮
var buttonNode=document.createElement("input");
buttonNode.type="BUTTON";
buttonNode.value="一个新按钮";
//添加到div_1
var divNode=document.getElementById("div_1");
divNode.appendChild(buttonNode);
}
//通过另一种方式添加节点
function createAndAdd3(){
var divNode=document.getElementById("div_1");
divNode.innerHTML="";
}
//将div_2节点删除
function deleteNode(){
var divNode=document.getElementById("div_2");
//删除方式一,自己删除自己(较少用)
//divNode.removeNode(true);
//删除方式二,拿父节点删除自己
divNode.parentNode.removeChild(divNode);
}
//将div_1替换成div_3
function updateNode(){
var div1=document.getElementById("div_1");
var div3=document.getElementById("div_3");
var copyDiv3=div3.cloneNode(true);
//div1.parentNode.replaceChild(copyDiv3,div1);
div1.parentNode.replaceChild(div3,div1);
}
//将div_1克隆成div_3
function cloneDemo(){
var div1=document.getElementById("div_1");
var div3=document.getElementById("div_3");
var copyDiv3=div3.cloneNode(true);
div1.parentNode.replaceChild(copyDiv3,div1);
//div1.parentNode.replaceChild(div3,div1);
}
</script>
好好学习,day day up!
div区域演示文字
节点的增删改查
节点的增删改查
最新推荐文章于 2022-08-24 12:08:14 发布