jQuery第三十一篇 增 删 替换 复制
//增
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.father{
width: 200px;
height: 200px;
background: red;
}
.son{
width: 100px;
height: 100px;
background: blue;
}
</style>
<script src="./jquery-1.10.1.min.js"></script>
</head>
<body>
<script>
$(function()
{
$("button").click(function()
{
var $li=$("<li>李文</li>");
//增加节点
/*$("ul").append($li);//后面
$("ul").prepend($li);//前面
*/
//$li.appendTo("ul");
//$li.prependTo("ul");
//$("ul").after($li);
// $("ul").before($li);
//$li.insertAfter("ul");
核心:注意一下多的话，会覆盖的哦
});
});
</script>
<button>添加节点</button>
<ul>
<li>我是第1个li</li>
<li>我是第2个li</li>
<li>我是第3个li</li>
</ul>
<div>我是div</div>
</body>
</html>//删除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.father{
width: 200px;
height: 200px;
background: red;
}
.son{
width: 100px;
height: 100px;
background: blue;
}
</style>
<script src="./jquery-1.10.1.min.js"></script>
</head>
<body>
<script>
$(function()
{
$("button").click(function()
{
//$("div").remove();//删除div,包括里面的内容
//$("div").empty();//删除div里面的内容,不删除div
// 利用remove方法删除之后,删掉remove那段,再浏览器里面刷新,然后事件无法响应
// 但是利用detach事件可以响应哦
//$("div").detach();
});
});
</script>
<button>删除节点</button>
<ul>
<li class="item">我是第1个li</li>
<li>我是第2个li</li>
<li class="item">我是第3个li</li>
<li>我是第4个li</li>
<li class="item">我是第5个li</li>
</ul>
<div>我是div
<p>我是段落</p>
</div>
</body>
</html>//替换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.father{
width: 200px;
height: 200px;
background: red;
}
.son{
width: 100px;
height: 100px;
background: blue;
}
</style>
<script src="./jquery-1.10.1.min.js"></script>
</head>
<body>
<script>
$(function()
{
$("button").click(function()
{
var $h6=$("<h6>我是标题</h6>");
//$("h1").replaceWith($h6);
//$h6.replaceAll("h1");
});
});
</script>
<button>替换节点</button>
<h1>我是标题1</h1>
<h1>我是标题1</h1>
<p>我是段落</p>
</body>
</html>//复制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.father{
width: 200px;
height: 200px;
background: red;
}
.son{
width: 100px;
height: 100px;
background: blue;
}
</style>
<script src="./jquery-1.10.1.min.js"></script>
</head>
<body>
<script>
$(function()
{
$("button").eq(0).click(function()
{
//浅复制
var $li=$("li:first").clone(false);
$("ul").append($li);
});
$("button").eq(1).click(function()
{
//深复制
var $li=$("li:first").clone(true);
$("ul").append($li);
});
$("li").click(function()
{
alert($(this).html());
});
});
</script>
<button>浅复制节点</button>
<button>深复制节点</button>
<ul>
<li>我是第1个li</li>
<li>我是第2个li</li>
<li>我是第3个li</li>
<li>我是第4个li</li>
<li>我是第5个li</li>
</ul>
</body>
</html>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020/08/14 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
