您的位置：首页 > Web前端 > JavaScript

DOM模型演示---增删改查中的删和改

2017-05-11 11:24 375 查看

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>DOM模型演示---增删改查中的删和改</title>

<style type="text/css">
div{
border:#00ff00 solid 1px;
width:300px;
height:50px;
}

</style>

</head>

<body>
<div id="div1"> 第一个div </div>

<div id="div2"> 第二个div <a href="#a">aaaa</a><span>eeee</span></div>
<div id="div3"> 第三个div </div>
<div id="div4"> 第四个div </div>

<hr>
<input type="button" value="删除" onclick="delNode()"><br/>
<script type="text/javascript">
function delNode(){
var oDivNode = document.getElementById("div2");
//粗略的删除方式
//var boo = oDivNode.removeNode(false);//删除后，所有子节点上升一层
//var boo = oDivNode.removeNode(true);//连子节点一起删除

//更干净的删除方式
oDivNode.parentNode.removeChild(oDivNode);//removeChild()会整个子树一起删除
}
</script>
<br/>
<hr>
<input type="button" value="移动替换" onclick="updateNode()"><br/>
<input type="button" value="克隆替换" onclick="updateNode2()"><br/>
<script type="text/javascript">
//用div3 替换 div1
//1移动替换
function updateNode(){
var oDivNode1 = document.getElementById("div1");
var oDivNode3 = document.getElementById("div3");
//oDivNode1.replaceNode(oDivNode3);
oDivNode1.parentNode.replaceChild(oDivNode3,oDivNode1);//把div3移动到div1处替换
}
//2克隆替换
function updateNode2(){
var oDivNode1 = document.getElementById("div1");
var oDivNode3 = document.getElementById("div3");
var oCopyDiv3 = oDivNode3.cloneNode(true);//空参默认为cloneNode(false),代表子树不克隆。相反，cloneNode(true)会连子树一起克隆
oDivNode1.parentNode.replaceChild(oCopyDiv3,oDivNode1);//用div3替换div1
}
</script>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jsp dom

相关文章推荐

新的分享

章节导航