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

本文实例讲述了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.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》

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

时间: 2020-05-19

jQuery 删除或是清空某个HTML元素示例

jQuery使用下面两个方法来删除或是清空某个HTML元素. remove() – 删除指定的元素(包括其子元素) empty() – 清空指定元素的子元素 例如: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JQuery Demo</title> <script src="scripts/jquery-1.9.1.js&q

jquery动态添加带有样式的HTML标签元素方法

如下所示: <table class="exhibit_table" style="font-size:13px; text-align:left;"> <tr> <td style="width:80px;" align="right">上传计划单</td> <td style="padding:10px;"><input type=&qu

JQuery给元素添加/删除节点比如select

jQuery获取Select选择的Text和Value: 复制代码 代码如下: var checkText=jQuery("#select_id").find("option:selected").text(); //获取Select选择的Text var checkValue=jQuery("#select_id").val(); //获取Select选择的option Value var checkIndex=jQuery("#se

jQuery添加删除DOM元素方法详解

本文实例分析了jQuery添加删除DOM元素的方法.分享给大家供大家参考,具体如下: 介绍 DOM是Document Object Modeule的缩写,一般来说,DOM操作分成3个方面. 1.DOM Core DOM Core并不专属于javascript,任何一种支持DOM的程序设计语言都可以使用它,用途也远不止仅限于网页,也可以用来处理任何一种使用标记语言编写出来的文档,如XML. 例如:document,getElementsByTagName("form");//使用DOM

jQuery动态添加、删除元素的方法

复制代码 代码如下: <script> $.schoolFn = { addItem: function(obj){ $("#itemList").append("<li id='liItrm' class='list-group-item clearfix'><span class='glyphicon glyphicon-resize-vertical sort-handle'></span>"+obj+"

Jquery动态添加及删除页面节点元素示例代码

通常我们会遇到选中某个条件,然后添加,累计多个后,再进行执行. 废话不多说,直接上代码! 复制代码 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>Jquery动态添加及删除页面节点</title> <script src="http://code.jquery.com/jquery-1.8.3.min.js&quo

jQuery动态添加及删除表单上传元素的方法(附demo源码下载)

本文实例讲述了jQuery动态添加及删除表单上传元素的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 点击此处查看在线演示效果. 具体代码如下: <html> <head> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(d

JQuery实现ul中添加LI和删除指定的Li元素功能完整示例

本文实例讲述了JQuery实现ul中添加LI和删除指定的Li元素功能.分享给大家供大家参考,具体如下: 最近为了实现这个简单的功能也是看了很多的内容,终于找出了看起来简单易实现的方法,我觉得能用最简洁的代码实现,就不要写的那么复杂,看也看不懂.先码着,为后面的项目做做准备. <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <met

jQuery使用append在html元素后同时添加多项内容的方法

本文实例讲述了jQuery使用append在html元素后同时添加多项内容的方法.分享给大家供大家参考.具体分析如下: 下面的代码可以同时在文本段落后添加多项内容 <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> function appendText() { var txt1="<p&g

jquery html动态添加的元素绑定事件详解

在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况: <div id="testdiv"> <ul></ul> </div> 假设我们要给ul动态添加的<li>绑定click事件形成如下结果 <div id="testdiv"> <ul> <li name="apple">apple</li> <li name="

Jquery显示、隐藏元素以及添加删除样式

复制代码 代码如下: <script type="text/javascript"> $(function () { //当input获取焦点后将其兄弟标签label隐藏 $("input").focus(function () { $(this).siblings("label").hide(); }); }); $(function () { //input元素失去焦点 $("input").blur(func

jquery显示隐藏元素的实现代码

$("#id").css('display','none'); $("#id").css('display','block'); 或 $("#id")[0].style.display = 'none'; $("#id")返回的是JQuery 它是个集合肯定没有display属性 $("#firstStep").hide(500);而且可以设置时间:("#firstStep").hide

jQuery使用toggleClass方法动态添加删除Class样式的方法

本文实例讲述了jQuery使用toggleClass方法动态添加删除Class样式的方法.分享给大家供大家参考.具体分析如下: jQuery通过toggleClass方法动态添加删除Class,一次执行相当于addClass,再次执行相当于removeClass,运行下面的代码点击按钮可以看到文本段落字体在蓝色和黑色间切换 <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"&

JQuery显示隐藏页面元素的方法总结

在jquery中显示隐藏div方法方法有很多种,如比较简单的函数show(),hide(),toggle(),slideDown()然后还有css设置div的style属性都可操作,下面我来介绍. show()方法 显示出隐藏的 <p> 元素. 复制代码 代码如下: $(".btn2").click(function(){   $("p").show(); }); toggle()方法 toggle() 方法切换元素的可见状态. 如果被选元素可见,则隐藏

从零开始学习jQuery (四) jQuery中操作元素的属性与样式

一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得大家学习. 二.前言 通过前面几章我们已经能够完全控制jQuery包装集了, 无论是通过选择器选取对象, 或者从包装集中删除,过滤元素. 本章将讲解如何使用jQuery获取和修改元素属性和样式. 三. 区分DOM属性和元素属性 一个img标签: <img src="images/image.1.jpg" id="hibiscus" alt="

JQuery显示隐藏DIV的方法及代码实例

1. 如果在载入是隐藏: 复制代码 代码如下: <head> <script language="javascript"> function HideWeekMonth() {     $("#tt1").hide();     $("#tt2").hide(); } </script> </head> <body onLoad="HideWeekMonth()">

解析javascript 数组以及json元素的添加删除

javasscript删除数组的3种方法1,用shift()方法shift:删除原数组第一项,并返回删除元素的值:如果数组为空则返回undefinedvar chaomao=[1,2,3,4,5]var chaomao.shift()//得到1alert(chaomao)//[2,3,4,5] 2,用pop()方法pop:删除原数组最后一项,并返回删除元素的值:如果数组为空则返回undefinedvar chaomao=[1,2,3,4,5]var chaomao.pop()//得到5alert

jQuery Tags Input Plugin(添加/删除标签插件)详解

看名字应该知道是干嘛用了吧. 一个jquery开发的标签功能加强插件,可以生成或删除标签,还能对输入重复标签进行检查,和JQuery autocomplete插件配合实现自动完成功能. 官网:http://xoxco.com/projects/code/tagsinput/ 截图: (下面是翻译了官网上的用法,英文不是很好,有能力的尽量看官网吧) 首先,引用下面两个文件 <script src="jquery.tagsinput.js"></script> &l

jquery显示隐藏input对象

1 所属部门选择其他时 显示一个输入框进行填写 #html <select id='deptid' name='deptid' class="select" onchange='deptChange()'> <c:forEach var="item" items="${deptidList}" varStatus="status"> <option value='${item.value}'>

JS 添加删除元素的实现代码

JS添加删除元素 替换后的文字"; var oldNode = $Name("P")[0];//获取body里面第一个p元素 oldNode.parentNode.replaceChild(newNode,oldNode);//直接替换了标签 } function removeMsg() { var node = $("p2");//p标签 var nodeBtn = $("remove");//按钮 //node.parentNode