动态删除节点

最新推荐文章于 2022-10-20 10:28:07 发布

bangxionger9224

最新推荐文章于 2022-10-20 10:28:07 发布

阅读量74

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/theWayToAce/p/5495783.html

版权

html：

<!DOCTYPE >
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>无标题文档</title>
 <style type="text/css">
* {
margin: 0px;
padding: 0;
font-family: "微软雅黑", "arial", " sans-serif";
font-size: 16px;
 }

button {
width: 120px;
height: 33px;
border-radius: 5px;
color: snow;
background: #5CA113;
font-weight: bold;
 }

body {
margin: 20px;
 }
 </style>
 <script type="text/javascript" src="js/jquery-2.2.2.min.js">
 </script>

 <script type="text/javascript">
 $(function () {
 $("#btnRemove").click(function () {
// 移除dom对象
 var oTip = $("#tip").remove();

// 重新添加dom对象
 $("#content").append(oTip);
 });
 $("#btnEmpty").click(function () {
// 移除dom对象
 var oSenc = $("#senc").empty();

// 重新添加dom对象
 $("#content").append("这是重新添加的内容喔，原来的内容已经被清除了！");
 });

 })
 </script>
</head>

<body>
<div id="welcome">演示使用remove和empty方法</div>
<div id="tip"><b>remove方法会从DOM树中移除节点</b></div>
<div id="senc"><b>empty方法只是清除元素的内容</b></div>
<div>
 <button name="btnRemove" id="btnRemove">remove方法</button>
</div>
<div>
 <button name="btnEmpty" id="btnEmpty">empty方法</button>
</div>
<div id="content" style="width: 300px; height: 200px;border: 1px solid red;margin-top: 50px;"></div>
</body>

</html>