jQuery - 添加元素

通过 jQuery，可以很容易地添加新元素/内容。

添加新的 HTML 内容

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

· append() - 在被选元素的结尾插入内容

· prepend() - 在被选元素的开头插入内容

· after() - 在被选元素之后插入内容

· before() - 在被选元素之前插入内容

jQuery append() 方法

jQuery append() 方法在被选元素的结尾插入内容。

实例

$("p").append("Some appended text.");

jQuery prepend() 方法

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 - 删除元素

· jQuery 添加

· jQuery CSS 类

通过 jQuery，可以很容易地删除已有的 HTML 元素。

删除元素/内容

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

· remove() - 删除被选元素（及其子元素）

· empty() - 从被选元素中删除子元素

jQuery remove() 方法

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

实例

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

jQuery empty() 方法

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

实例

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

过滤被删除的元素

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

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

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

实例

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

转载于:https://www.cnblogs.com/cmhunter/p/4183955.html

Web开发技术——JQuery8（添加元素和删除元素）相关推荐

hualinux 1.25：Web开发技术发展史
目录一.web的诞生二.动态内容的出现:CGI 三.Web编程脚本语言:PHP/ASP/JSP 四.分布式企业计算平台:J2EE/.Net 五.框架横飞的年代:MVC,ORM 六.回归Web本质: ...
崔尚森《web开发技术》复习提纲
<web开发技术>复习代课老师:朱依水参考文献:崔尚森.张白一.张辰<web应用开发技术:JSP>,Robert W. Sebesta<Web程序设计>第七版, ...
通俗易懂，什么是.NET?什么是.NET Framework？什么是.NET Core? .Net Web开发技术栈...
通俗易懂,什么是.NET?什么是.NET Framework?什么是.NET Core? 什么是.NET?什么是.NET Framework?本文将从上往下,循序渐进的介绍一系列相关.NET的概念,先 ...
.Net Web开发技术栈
有很多朋友有的因为兴趣,有的因为生计而走向了.Net中,有很多朋友想学,但是又不知道怎么学,学什么,怎么系统的学,为此我以我微薄之力总结归纳写了一篇.Net web开发技术栈,以此帮助那些想学,却不知 ...
【渝粤题库】广东开放大学 java web开发技术形成性考核
题库查询系统选择题题目:当多个用户请求同一个JSP页面时,Tomcat服务器为每个客户启动一个_____. 题目:以下_____不是JSP运行所必须的条件. 题目:Tomcat服务器的默认端口为_ ...
web开发技术和技术分享_2020年将改变Web开发的顶级技术
web开发技术和技术分享 Web improvement encompasses a gigantic arrangement of rules and procedures each site en ...
.Net Web开发技术栈收藏
原文:http://www.cnblogs.com/1996V/p/7700087.html#!comments 有很多朋友有的因为兴趣,有的因为生计而走向了.Net中,有很多朋友想学,但是又不知道怎 ...
Web开发技术十年发展历程
回顾web开发技术这十年发展历程: Ajax 03年的时候我上六年级,那时候网吧刚在小县城的角落萌生.传奇,大话西游第一代网游一时风靡.我抱着试一试的心态给了网吧老板两块钱想申请个号玩玩,然后接下来的 ...
Web开发技术的历史发展简介
讨论Web开发技术的历史,当然要先说说Web的起源.众所周知,Web这个Internet上最热门的应用架构是由Tim Berners-Lee发明的.Web的前身是1980年Tim Berners-Le ...
Web 开发技术项目设计日志
Powered by:NEFU AB-IN 文章目录 Web 开发技术项目设计关于项目时长项目日志项目要求设计内容主要功能前台网站后台系统 License 版权声明 Web 开发技术项 ...

Web开发技术——JQuery8（添加元素和删除元素）