本文主要介绍如何使用JQuery添加/删除元素
添加元素
针对文本元素的操作,例如<p>
append() - 在被选元素的结尾插入内容 •
prepend() - 在被选元素的开头插入内容 •
针对非为本元素的操作,例如<input>
after() - 在被选元素之后插入内容 •
before() - 在被选元素之前插入内容 •
jQuery append(),prepend() 方法
jQuery append() 方法在被选元素的结尾插入内容。
$("p").append("Some appended text.");
jQuery prepend() 方法在被选元素的开头插入内容。
$("p").prepend("Some prepended text.");
通过 append() 和 prepend() 方法添加若干新元素
在上面的例子中,我们只在被选元素的开头/结尾插入文本/HTML。
不过,append() 和 prepend() 方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本/HTML(就像上面的例子那样),或者通过 JavaScript 代码和 DOM 元素。
在下面的例子中,我们创建若干个新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 append() 方法
把这些新元素追加到文本中(对 prepend() 同样有效):
实例
function appendText()
{
var txt1="<p>Text.</p>"; // 以 HTML 创建新元素
var txt2=$("<p></p>").text("Text."); // 以 jQuery 创建新元素
var txt3=document.createElement("p"); // 以 DOM 创建新元素
txt3.innerHTML="Text.";
$("p").append(txt1,txt2,txt3); // 追加新元素
}
jQuery after() 和 before() 方法
jQuery after() 方法在被选元素之后插入内容。
jQuery before() 方法在被选元素之前插入内容。
实例
$("img").after("Some text after");
$("img").before("Some text 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); // 在 img 之后插入新元素
}
删除元素/内容
jQuery remove() 方法
jQuery remove() 方法删除被选元素及其子元素。
$("#div1").remove();
jQuery empty() 方法
jQuery empty() 方法删除被选元素的子元素。
$("#div1").empty();
过滤被删除的元素
Remove()方法的过滤
jQuery remove() 方法也可接受一个参数,允许您对被删元素进行过滤。该参数可以是任何 jQuery 选择器的语法。
下面的例子删除 class="italic" 的所有 <p> 元素:
$("p").remove(".italic");
分享到:
相关推荐
jQuery入门,jQuery入门,jQuery入门,jQuery入门
《jQuery全能权威指南:jQuery Core+jQuery Plugin+jQuery UI+jQuery Mobile》的阅读对象是具有一些HTML 、CSS和JavaScript知识的开发者,内容覆盖了jQuery知识体系的全部内容,包括jQuery Core、jQuery Plugin 、...
jQuery入门指南 jQuery入门指南
jQuery中文入门指南.pdf
ASP.NET MVC和jQuery系列一:入门篇ASP.NET MVC和jQuery系列一:入门篇ASP.NET MVC和jQuery系列一:入门篇ASP.NET MVC和jQuery系列一:入门篇ASP.NET MVC和jQuery系列一:入门篇
实用的jquery添加删除元素,代码很简单,在这里记录下
摘要:jQuery 入门指南 学习文档 范例打包 效果应用 jQuery_api,此包在手,jQuery学习无忧。
jQuery入门指南教程 这个指南是一个对jQuery库的说明,要求读者了解HTML(DOM)和CSS的一些常识。它包括了一个简单的Hello World的例子,选择器和事件基础,AJAX、FX的用法,以及如何制作jQuery的插件。 这个指南包括...
jquery入门jquery入门jquery入门jquery入门
《jQuery全能权威指南:jQuery Core+jQuery Plugin+jQuery UI+jQuery Mobile》的阅读对象是具有一些HTML、CSS和JavaScript知识的开发者,内容覆盖了jQuery知识体系的全部内容,包括jQuery Core、jQuery Plugin、...
资源名称:jQuery 七天入门指南内容简介:jQuery 初级教程——七天入门指南中文版, pdf高清淅版,翻译加实例,学习jQuery的第一手资料,jQuery的起点教程,书中的内容涉及以实例为基础一步步说明了jQuery的工作方式...
jQuery中文入门指南
jQuery插件之三:日期选择器DatePicker jQuery插件之三:日期选择器DatePicker jQuery插件之三:日期选择器DatePicker
对齐 jQuery 插件Align 插件建立在函数的基础上,以对齐一个或多个元素在它们的偏移父元素上。用法 .align( options )options :传递给方法的附加选项的映射。 支持的键: 容器:要与之对齐的 DOM 对象。 默认 = 父...
jQuery中文入门指南.doc jQuery中文入门指南.doc
jquery入门教程 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery 包装集 从零开始学习jQuery (四) 使用jQuery 操作元素的属性与样式 从零开始...