jquery html添加元素/删除元素操作实例详解


Posted in jQuery onMay 20, 2020

本文实例讲述了jquery html添加元素/删除元素操作。分享给大家供大家参考,具体如下:

添加元素

添加新的 HTML 内容

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

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

append() 方法

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

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

prepend() 方法

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

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

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

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);    // 追加新元素
}

fter() 和 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 - 删除元素

删除元素/内容

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

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

remove() 方法

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

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

empty() 方法

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

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

过滤被删除的元素

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

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

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

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

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jquery插件制作 自增长输入框实现代码
Aug 17 jQuery
jquery实现全选、全不选以及单选功能
Mar 23 jQuery
jQuery ajax请求struts action实现异步刷新
Apr 19 jQuery
jquery实现简单实用的轮播器
May 23 jQuery
jQuery使用ajax_动力节点Java学院整理
Jul 05 jQuery
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 jQuery
基于jquery实现五星好评
Nov 18 jQuery
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
May 09 jQuery
jquery简单实现纵向的无缝滚动代码实例
Apr 01 jQuery
jQuery实现滑动星星评分效果(每日分享)
Nov 13 jQuery
jquery实现直播弹幕效果
Nov 28 jQuery
jQuery HTML css()方法与css类实例详解
May 20 #jQuery
jQuery 隐藏/显示效果函数用法实例分析
May 20 #jQuery
jQuery 淡入/淡出效果函数用法分析
May 19 #jQuery
jQuery 动画与停止动画效果实例详解
May 19 #jQuery
jQuery 选择方法及$(this)用法实例分析
May 19 #jQuery
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
May 19 #jQuery
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 #jQuery
You might like
PHP获取一年中每个星期的开始和结束日期的方法
2015/02/12 PHP
php curl请求信息和返回信息设置代码实例
2015/04/27 PHP
php实现给二维数组中所有一维数组添加值的方法
2017/02/04 PHP
如何修改Laravel中url()函数生成URL的根地址
2017/08/11 PHP
PHP写API输出的时用echo的原因详解
2019/04/28 PHP
Thinkphp 框架扩展之驱动扩展实例分析
2020/04/27 PHP
在IE6下发生Internet Explorer cannot open the Internet site错误
2010/06/21 Javascript
ie下jquery.getJSON的缓存问题的处理方法
2013/03/29 Javascript
表单元素与非表单元素刷新区别详细解析
2013/11/06 Javascript
深入理解JavaScript是如何实现继承的
2013/12/12 Javascript
Javascript selection的兼容性写法介绍
2013/12/20 Javascript
深入理解javascript中return的作用
2013/12/30 Javascript
js实现大转盘抽奖游戏实例
2015/06/24 Javascript
莱鸟介绍window.print()方法
2016/01/06 Javascript
AngularJS入门教程中SQL实例详解
2016/07/27 Javascript
jQuery实现的多张图无缝滚动效果【测试可用】
2016/09/12 Javascript
详解微信小程序Radio选中样式切换
2017/07/06 Javascript
vue实现全选和反选功能
2017/08/31 Javascript
nodejs实现截取上传视频中一帧作为预览图片
2017/12/10 NodeJs
JS关闭子窗口并且刷新上一个窗口的实现示例
2020/03/10 Javascript
微信小程序自定义navigationBar顶部导航栏适配所有机型(附完整案例)
2020/04/26 Javascript
[51:43]OG vs LGD 2018国际邀请赛淘汰赛BO3 第五场 8.26
2018/08/30 DOTA
python保存字符串到文件的方法
2015/07/01 Python
python字符串的方法与操作大全
2018/01/30 Python
Python3爬楼梯算法示例
2019/03/04 Python
Django 实现前端图片压缩功能的方法
2019/08/07 Python
python 使用建议与技巧分享(四)
2020/08/18 Python
Python word文本自动化操作实现方法解析
2020/11/05 Python
希尔顿酒店官方网站:Hilton Hotels
2017/06/01 全球购物
美国Randolph太阳镜官网:美国制造的飞行员太阳镜和射击眼镜
2018/06/15 全球购物
俄罗斯便宜的在线服装商店:GroupPrice
2020/04/10 全球购物
如何手工释放资源
2013/12/15 面试题
办公室内勤工作职责
2013/12/11 职场文书
税务会计岗位职责
2014/02/18 职场文书
保险公司年会主持词
2014/03/22 职场文书
2015年环卫工作总结
2015/04/28 职场文书