<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>删除和替换节点</title>
<style>
*{padding: 0; margin: 0; font-size: 12px;}
ul,li{list-style: none;}
li{float: left; text-align: center; width: 140px;}
</style>
</head>
<body>
<ul>
<li>
<img src="img/f01.jpg" id="first">
<p><input type="button" value="删除我吧" onclick="del()"></p>
</li>
<li>
<img src="img/f02.jpg" id="second">
<p><input type="button" value="换换我吧" onclick="rep()"></p>
</li>
</ul>
<script>
function del(){
var delNode=document.getElementById("first");
delNode.parentNode.removeChild(delNode);
}
function rep(){
var oldNode=document.getElementById("second");
var newNode=document.createElement("img");
newNode.setAttribute("src","img/f03.jpg");
oldNode.parentNode.replaceChild(newNode,oldNode);
}
</script>
</body>
</html>
作业2-删除节点
最新推荐文章于 2021-12-13 16:31:02 发布