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获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 jQuery
jQuery实现点击关注和取消功能
Jul 03 jQuery
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 jQuery
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 jQuery
jquery操作ul的一些操作笔记整理(干货)
Aug 31 jQuery
jquery 一键复制到剪切板的实例
Sep 20 jQuery
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 jQuery
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 jQuery
JQuery常用简单动画操作方法回顾与总结
Dec 07 jQuery
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 jQuery
Jquery如何使用animation动画效果改变背景色的代码
Jul 20 jQuery
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 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设计模式 FlyWeight (享元模式)
2011/06/26 PHP
PHP截断标题且兼容utf8和gb2312编码
2013/09/22 PHP
Display SQL Server Login Mode
2007/06/21 Javascript
基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )
2010/11/14 Javascript
Jquery $.getJSON 在IE下的缓存问题解决方法
2014/10/10 Javascript
JavaScript实现弹出子窗口并传值给父窗口
2014/12/18 Javascript
JS实现图片局部放大或缩小的方法
2016/08/20 Javascript
chrome浏览器如何断点调试异步加载的JS
2016/09/05 Javascript
深入理解JS中的Function.prototype.bind()方法
2016/10/11 Javascript
angularjs指令之绑定策略(@、=、&amp;)
2017/04/13 Javascript
Vue.js tab实现选项卡切换
2017/05/16 Javascript
Angular4 中内置指令的基本用法
2017/07/31 Javascript
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
2017/11/08 jQuery
详解小程序原生使用ES7 async/await语法
2018/08/06 Javascript
vue展示dicom文件医疗系统的实现代码
2018/08/27 Javascript
微信小程序左滑删除功能开发案例详解
2018/11/12 Javascript
简单了解JavaScript中常见的反模式
2019/06/21 Javascript
layui form表单提交之后重新加载数据表格的方法
2019/09/11 Javascript
el-form 多层级表单的实现示例
2020/09/10 Javascript
wxPython学习之主框架实例
2014/09/28 Python
python实现海螺图片的方法示例
2019/05/12 Python
PyTorch的深度学习入门之PyTorch安装和配置
2019/06/27 Python
python rsync服务器之间文件夹同步脚本
2019/08/29 Python
Python中关于浮点数的冷知识
2019/09/22 Python
pygame实现俄罗斯方块游戏(基础篇1)
2019/10/29 Python
解决pycharm中opencv-python导入cv2后无法自动补全的问题(不用作任何文件上的修改)
2020/03/05 Python
python获取系统内存占用信息的实例方法
2020/07/17 Python
如何用 Python 制作一个迷宫游戏
2021/02/25 Python
Under Armour安德玛荷兰官网:美国高端运动科技品牌
2019/07/10 全球购物
团员学习总结的自我评价范文
2013/10/14 职场文书
2014自荐信的写作技巧
2014/01/28 职场文书
社会学专业学生职业规划书
2014/02/07 职场文书
2015年清明节扫墓演讲稿
2015/03/18 职场文书
2016年社区“6.26”禁毒日宣传活动总结
2016/04/05 职场文书
MySQL令人大跌眼镜的隐式转换
2021/08/23 MySQL
一次SQL如何查重及去重的实战记录
2022/03/13 MySQL