jQuery 添加元素和删除元素的方法


Posted in jQuery onJuly 15, 2020

添加新的 HTML 内容

我们将学习用于添加新内容的四个 jQuery 方法:

  • append() - 在被选元素的结尾插入内容
  • prepend() - 在被选元素的开头插入内容
  • after() - 在被选元素之后插入内容
  • before() - 在被选元素之前插入内容

jQuery append() 方法

jQuery append() 方法在被选元素的结尾插入内容(仍然在该元素的内部)。

$("p").append("追加文本");

jQuery prepend() 方法

jQuery prepend() 方法在被选元素的开头插入内容。

$("p").prepend("在开头追加文本");

通过 append() 和 prepend() 方法添加若干新元素

在上面的例子中,我们只在被选元素的开头/结尾插入文本/HTML。

不过,append() 和 prepend() 方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本/HTML(就像上面的例子那样),或者通过 JavaScript 代码和 DOM 元素。

在下面的例子中,我们创建若干个新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 append() 方法把这些新元素追加到文本中(对 prepend() 同样有效):

function appendText()
{
 var txt1="<p>文本。</p>";    // 使用 HTML 标签创建文本
 var txt2=$("<p></p>").text("文本。"); // 使用 jQuery 创建文本
 var txt3=document.createElement("p");
 txt3.innerHTML="文本。";    // 使用 DOM 创建文本 text with DOM
 $("body").append(txt1,txt2,txt3);  // 追加新元素
}

jQuery after() 和 before() 方法

jQuery after() 方法在被选元素之后插入内容。

jQuery before() 方法在被选元素之前插入内容。

$("img").after("在后面添加文本");
 
$("img").before("在前面添加文本");

通过 after() 和 before() 方法添加若干新元素

after() 和 before() 方法能够通过参数接收无限数量的新元素。可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建新元素。

在下面的例子中,我们创建若干新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 after() 方法把这些新元素插到文本中(对 before() 同样有效):

function afterText()
{
 var txt1="<b>I </b>";     // 使用 HTML 创建元素
 var txt2=$("<i></i>").text("love ");  // 使用 jQuery 创建元素
 var txt3=document.createElement("big"); // 使用 DOM 创建元素
 txt3.innerHTML="jQuery!";
 $("img").after(txt1,txt2,txt3);   // 在图片后添加文本
}

删除元素/内容

如需删除元素和内容,一般可使用以下两个 jQuery 方法:

  • remove() - 删除被选元素(及其子元素)
  • empty() - 从被选元素中删除子元素

jQuery remove() 方法

jQuery remove() 方法删除被选元素及其子元素。

$("#div1").remove();

jQuery empty() 方法

jQuery empty() 方法删除被选元素的子元素。

$("#div1").empty();

过滤被删除的元素

jQuery remove() 方法也可接受一个参数,允许您对被删元素进行过滤。

该参数可以是任何 jQuery 选择器的语法。

下面的例子删除 class="italic" 的所有 <p> 元素:

$("p").remove(".italic");

以上就是jQuery 添加元素和删除元素的方法的详细内容,更多关于jQuery 添加元素和删除元素的资料请关注三水点靠木其它相关文章!

jQuery 相关文章推荐
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
Mar 23 jQuery
jQuery实现简单的手风琴效果
Apr 17 jQuery
jQuery实现的简单前端搜索功能示例
Oct 28 jQuery
jquery学习笔记之无new构建详解
Dec 07 jQuery
基于jQuery实现无缝轮播与左右点击效果
May 13 jQuery
jQuery实现的页面弹幕效果【测试可用】
Aug 17 jQuery
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 jQuery
jQuery-ui插件sortable实现自由拖动排序
Dec 01 jQuery
jquery获取file表单选择文件的路径、名字、大小、类型
Jan 18 jQuery
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
Feb 27 jQuery
layui+jquery支持IE8的表格分页方法
Sep 28 jQuery
jQuery实现tab栏切换效果
Dec 22 jQuery
Jquery使用each函数实现遍历及数组处理
Jul 14 #jQuery
jQuery 实现DOM元素拖拽交换位置的实例代码
Jul 14 #jQuery
jQuery开发仿QQ版音乐播放器
Jul 10 #jQuery
jQuery实现B2B网站后台管理系统侧导航
Jul 08 #jQuery
jQuery使用jsonp实现百度搜索的示例代码
Jul 08 #jQuery
jQuery 实现扁平式小清新导航
Jul 07 #jQuery
jQuery 动态粒子效果示例代码
Jul 07 #jQuery
You might like
php 分页函数multi() discuz
2009/06/21 PHP
mysql下创建字段并设置主键的php代码
2010/05/16 PHP
PHP 一个随机字符串生成代码
2010/05/26 PHP
第五章 php数组操作
2011/12/30 PHP
单点登录 Ucenter示例分析
2013/10/29 PHP
php表单提交实例讲解
2015/11/12 PHP
jquery 学习之二 属性相关
2010/11/23 Javascript
javascript学习笔记(十三) js闭包介绍(转)
2012/06/20 Javascript
Bootstrap前端开发案例二
2016/06/17 Javascript
详解vuex 中的 state 在组件中如何监听
2017/05/23 Javascript
Vue商品控件与购物车联动效果的实例代码
2019/07/21 Javascript
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
2019/09/03 jQuery
vue 如何从单页应用改造成多页应用
2020/10/23 Javascript
python中查找excel某一列的重复数据 剔除之后打印
2013/02/10 Python
pygame学习笔记(3):运动速率、时间、事件、文字
2015/04/15 Python
在Python中使用dict和set方法的教程
2015/04/27 Python
编写Python脚本来实现最简单的FTP下载的教程
2015/05/04 Python
深入理解Python爬虫代理池服务
2018/02/28 Python
python如何将两张图片生成为全景图片
2020/03/05 Python
Python经纬度坐标转换为距离及角度的实现
2020/11/01 Python
Meli Melo官网:名媛们钟爱的英国奢侈手包品牌
2017/04/17 全球购物
荷兰网上药店:Drogisterij.net
2019/09/03 全球购物
泰国排名第一的家居用品中心:HomePro
2020/11/18 全球购物
瑞典多品牌连锁店:Johnells
2021/01/13 全球购物
利达恒信公司.NET笔试题面试题
2016/03/05 面试题
测控技术与通信工程毕业生自荐信范文
2013/12/28 职场文书
网络教育自我鉴定
2014/02/04 职场文书
完美的中文自荐信
2014/05/24 职场文书
公司领导九九重阳节发言稿2014
2014/09/25 职场文书
查摆问题整改措施范文
2014/10/11 职场文书
员工给公司的建议书
2019/06/24 职场文书
Python实现Telnet自动连接检测密码的示例
2021/04/16 Python
Python还能这么玩之只用30行代码从excel提取个人值班表
2021/06/05 Python
浅谈Python3中datetime不同时区转换介绍与踩坑
2021/08/02 Python
Golang 对es的操作实例
2022/04/20 Golang
Go gorilla securecookie库的安装使用详解
2022/08/14 Golang