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仿京东商品放大浏览页面
Jun 06 jQuery
jQuery实现 RadioButton做必选校验功能
Jun 15 jQuery
jquery拖动改变div大小
Jul 04 jQuery
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 jQuery
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
jQuery表单元素过滤选择器用法实例分析
Feb 20 jQuery
Vue项目中使用jquery的简单方法
May 16 jQuery
jQuery操作事件完整实例分析
Jan 10 jQuery
jQuery表单校验插件validator使用方法详解
Feb 18 jQuery
jQuery实现带进度条的轮播图
Sep 13 jQuery
jQuery实现简单评论区功能
Oct 26 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中文乱码
2009/11/26 PHP
利用PHP生成静态HTML文档的原理
2012/10/29 PHP
Thinkphp3.2.3分页使用实例解析
2016/07/28 PHP
thinkphp实现把数据库中的列的值存到下拉框中的方法
2017/01/20 PHP
php7 新增功能实例总结
2020/05/25 PHP
javascript 面向对象编程  function是方法(函数)
2009/09/17 Javascript
js 实现css风格选择器(压缩后2KB)
2012/01/12 Javascript
在Node.js中实现文件复制的方法和实例
2014/06/05 Javascript
用jquery的方法制作一个简单的导航栏
2014/06/23 Javascript
Javascript学习笔记之 对象篇(三) : hasOwnProperty
2014/06/24 Javascript
JS中的Replace方法使用经验分享
2015/05/20 Javascript
javascript引用类型之时间Date和数组Array
2015/08/27 Javascript
jQuery+ajax读取并解析XML文件的方法
2016/09/09 Javascript
node.js调用Chrome浏览器打开链接地址的方法
2017/05/17 Javascript
vue页面使用阿里oss上传功能的实例(二)
2017/08/09 Javascript
vue.js的computed,filter,get,set的用法及区别详解
2018/03/08 Javascript
详解vue数组遍历方法forEach和map的原理解析和实际应用
2018/11/15 Javascript
vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单
2018/11/29 Javascript
详解bootstrap-fileinput文件上传控件的亲身实践
2019/03/21 Javascript
Layui表格监听行单双击事件讲解
2019/11/14 Javascript
react-router-dom 嵌套路由的实现
2020/05/02 Javascript
js+canvas实现画板功能
2020/09/13 Javascript
js前端对于大量数据的展示方式及处理方法
2020/12/02 Javascript
python链接Oracle数据库的方法
2015/06/28 Python
python实现八大排序算法(1)
2017/09/14 Python
使用python将大量数据导出到Excel中的小技巧分享
2018/06/14 Python
对python数据切割归并算法的实例讲解
2018/12/12 Python
详解python实现小波变换的一个简单例子
2019/07/18 Python
英国天然宝石首饰购买网站:Gemondo Jewellery
2018/10/23 全球购物
中学生差生评语
2014/01/30 职场文书
幼儿园六一儿童节主持节目串词
2014/03/21 职场文书
三严三实对照检查材料思想汇报
2014/09/28 职场文书
先进典型事迹材料
2014/12/29 职场文书
婚姻出轨保证书
2015/05/08 职场文书
JavaScript控制台的更多功能
2021/04/28 Javascript
Vue深入理解插槽slot的使用
2022/08/05 Vue.js