jQuery添加或删除元素

文章目录

• 前言
• 一、添加元素
• • 1.append()
  • 2.prepend()
  • 3.after()
  • 4.before()
• 二、删除元素
• • 1.empty()
  • 2.remove()
• 总结

前言

jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。目前超过90%的网站都使用了jQuery库，jQuery的宗旨：写的更少，做得更多！
今天分享四种添加元素与两种删除元素。

现在搭建一下html：

<div id="box">
	<p>我是p标签</p>
	<header>我是头部标签</header>
</div>
<!-- 按钮 -->
<button id="btn">btn</button>复制

一、添加元素

1.append()

在被选元素结尾插入内容（所插入内容仍在元素内部）

$('#btn').on('click',function(){
	$('#box').append('<a href="">我是a标签</a>')
})复制

2.prepend()

在被选元素开头插入内容

$('#btn').on('click',function(){
	$('#box').prepend('<a href="">我是a标签</a>')
})复制

3.after()

在被选元素之后插入内容（所插入内容在元素外部）

$('#btn').on('click',function(){
	$('#box').after('<a href="">我是a标签</a>')
})复制

4.before()

在被选元素之前插入内容

$('#btn').on('click',function(){
	$('#box').before('<a href="">我是a标签</a>')
})复制

二、删除元素

1.empty()

把子元素删除掉了。因为本身没有删除掉，本身占位置

$('#btn').on('click',function(){
	$('#box').empty()
})复制

2.remove()

把自己和子元素都删除掉了。因为本身已经删除掉，所以不占位置

$('#btn').on('click',function(){
	$('#box').remove()
})复制

总结

以上就是今天要讲的内容。