remove() empty() after()

最新推荐文章于 2022-11-18 14:01:47 发布

zhvsby

最新推荐文章于 2022-11-18 14:01:47 发布

阅读量762

点赞数

CC 4.0 BY-SA版权

分类专栏： JQuery 文章标签： function html button

本文链接：https://blog.youkuaiyun.com/zhvsby/article/details/5922285

JQuery 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了jQuery中remove(), empty(), after()等方法的功能及用法，包括如何使用这些方法来删除DOM元素、清空元素内容以及在选定元素后插入内容。此外，还提供了一个通用的替换方法实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

remove()----从页面DOM里删除包装集所有元素。需要注意的是从DOM里删除的元素仍然被该包装集引用着。

empty()-----清空匹配集里所有dom元素的内容

after()-------after() 方法在被选元素后插入指定的内容。

如：

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").after("<p>Hello world!</p>");
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button>在每个 p 元素后插入内容</button>
</body>
</html>
------------------------------------------------

This is a paragraph.

--------------------------------------------------

This is a paragraph.

Hello world!

-------------------------------------------------------------

可以利用remove()和after()方法进行替换操作

如： $("p").after("<p>Hello world!</p>");改写为

$("p").after("<p>Hello world!</p>").remove();

则如下图；

Hello world!

---------------------------自己的一个感悟：一直认为$("p").after("<p>Hello world!</p>")到这里后会返回一个包装集合然后执行remove()方法后会全部去掉，不过仔细看了after()函数它不返回包装集的只是个操作，所以针对remove操作的还是原来的包装集不知道对不这样理解

针对上述替换可以写出来一个通用的方法如下；
$.fn.rplaceWith=function(html){

return this.after(html).remove();

}