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中关于bind()方法的使用技巧分享
Mar 30 jQuery
jquery 校验中国身份证号码实例详解
Apr 11 jQuery
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 jQuery
jQuery实现简单的手风琴效果
Apr 17 jQuery
jQuery实现拼图小游戏(实例讲解)
Jul 24 jQuery
zTree jQuery 树插件的使用(实例讲解)
Sep 25 jQuery
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 jQuery
jQuery实现鼠标响应式淘宝动画效果示例
Feb 13 jQuery
JQuery Ajax动态加载Table数据的实例讲解
Aug 09 jQuery
jquery.pager.js实现分页效果
Jul 29 jQuery
jquery选择器和属性对象的操作实例分析
Jan 10 jQuery
Jquery高级应用Deferred对象原理及使用实例
May 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
利用curl抓取远程页面内容的示例代码
2013/07/23 PHP
PHP统计二维数组元素个数的方法
2013/11/12 PHP
php中 $$str 中 &quot;$$&quot; 的详解
2015/07/06 PHP
1亿条数据如何分表100张到Mysql数据库中(PHP)
2015/07/29 PHP
js一组验证函数
2008/12/20 Javascript
Javascript变量函数浅析
2011/09/02 Javascript
使用jQuery操作Cookies的实现代码
2011/10/09 Javascript
用dtree实现树形菜单 dtree使用说明
2011/10/17 Javascript
js读取json的两种常用方法示例介绍
2014/10/19 Javascript
jQuery学习笔记之Ajax用法实例详解
2015/12/01 Javascript
Angular2使用Angular-CLI快速搭建工程(二)
2017/05/21 Javascript
VUE实现表单元素双向绑定(总结)
2017/08/08 Javascript
Vue中render方法的使用详解
2018/01/26 Javascript
命令行批量截图Node脚本示例代码
2019/01/25 Javascript
Js利用正则表达式去除字符串的中括号
2020/11/23 Javascript
python新手经常遇到的17个错误分析
2014/07/30 Python
Python实现向服务器请求压缩数据及解压缩数据的方法示例
2017/06/09 Python
Python使用add_subplot与subplot画子图操作示例
2018/06/01 Python
对django xadmin自定义菜单的实例详解
2019/01/03 Python
PyQt5基本控件使用详解:单选按钮、复选框、下拉框
2019/08/05 Python
30秒学会30个超实用Python代码片段【收藏版】
2019/10/15 Python
Python逐行读取文件内容的方法总结
2020/02/14 Python
使用Python打造一款间谍程序的流程分析
2020/02/21 Python
Python tkinter实现简单加法计算器代码实例
2020/05/13 Python
学习Python爬虫的几点建议
2020/08/05 Python
如何使用python-opencv批量生成带噪点噪线的数字验证码
2020/12/21 Python
英国领先的杂志订阅网站:Magazine.co.uk
2018/01/25 全球购物
聚网科技C++面试笔试题
2015/09/01 面试题
致短跑运动员广播稿
2014/01/09 职场文书
交通安全标语
2014/06/06 职场文书
2014年图书室工作总结
2014/12/09 职场文书
索赔员岗位职责
2015/02/15 职场文书
入党个人总结范文
2015/03/02 职场文书
2016七夕情人节广告语
2016/01/28 职场文书
MongoDB使用profile分析慢查询的步骤
2021/04/30 MongoDB
用React Native制作一个简单的游戏引擎
2021/05/27 Javascript