iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > html >jquery如何在指定元素后面增加内容
  • 875
分享到

jquery如何在指定元素后面增加内容

2024-04-02 19:04:59 875人浏览 安东尼
摘要

这篇文章主要讲解了“Jquery如何在指定元素后面增加内容”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“jquery如何在指定元素后面增加内容”吧!

这篇文章主要讲解了“Jquery如何在指定元素后面增加内容”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“jquery如何在指定元素后面增加内容”吧!

两种方法:1、用after(),语法“$(指定元素).after("新增内容")”,可向指定元素后面增加指定内容。2、用insertAfter(),语法“$("内容值").insertAfter(指定元素)”,可将内容插入到指定元素的后面。

jquery如何在指定元素后面增加内容

教程操作环境:windows7系统、jquery1.10.2版本、Dell G3电脑。

jquery怎么在指定元素后面增加内容

在指定元素后面增加内容,就是在指定元素后插入同级元素。jquery提供了两种方法:

  • after()

  • insertAfter()

after( ) 和insertAfter( )都可在被选元素后插入指定的内容,但是两者的操作对象是颠倒的。下面具体介绍一下。

1、使用after()

$(A).after(B)表示往 A 外部的后面插入 B。

示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("div").after("这是往div后面增加的新文本内容");
				});
			});
		</script>
	</head>
	<body>

		<div style="height:100px;background-color:yellow">
			这是一些文本。
			<p>这是div块中的一个p段落。</p>
		</div><br>
		<button>往div后面增加内容</button>

	</body>
</html>

jquery如何在指定元素后面增加内容

2、使用insertAfter()

$(A).insertAfter(B) 表示将 A 插入到 B 外部的后面。

示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("<span style='color:pink;'>这是一个新增的span元素</span>").insertAfter("div");
				});
			});
		</script>
	</head>
	<body>

		<div style="height:100px;background-color:yellow">
			这是一些文本。
			<p>这是div块中的一个p段落。</p>
		</div><br>
		<button>往div后面增加内容</button>

	</body>
</html>

jquery如何在指定元素后面增加内容

感谢各位的阅读,以上就是“jquery如何在指定元素后面增加内容”的内容了,经过本文的学习后,相信大家对jquery如何在指定元素后面增加内容这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是编程网,小编将为大家推送更多相关知识点的文章,欢迎关注!

--结束END--

本文标题: jquery如何在指定元素后面增加内容

本文链接: https://www.lsjlt.com/news/97766.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • jquery如何在指定元素后面增加内容
    这篇文章主要讲解了“jquery如何在指定元素后面增加内容”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“jquery如何在指定元素后面增加内容”吧! ...
    99+
    2024-04-02
  • jquery如何在元素内部增加元素
    这篇文章主要介绍了jquery如何在元素内部增加元素的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇jquery如何在元素内部增加元素文章都会有所收获,下面我们一起来看看吧。 ...
    99+
    2024-04-02
  • jquery如何在div内增加元素
    这篇文章主要讲解了“jquery如何在div内增加元素”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“jquery如何在div内增加元素”吧! ...
    99+
    2024-04-02
  • jQuery如何在元素内部后置内容?
    这篇文章将为大家详细讲解有关jQuery如何在元素内部后置内容?,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。jQuery 后置内容方法 jQuery 提供了多种方法在元素内部后置内容,具体取决于所需的效...
    99+
    2024-04-02
  • jQuery如何在元素内部追加内容?
    这篇文章将为大家详细讲解有关jQuery如何在元素内部追加内容?,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。 : jQuery 提供多种方法在元素内部追加内容,具体如下: 1. append() 方法 ...
    99+
    2024-04-02
  • jquery如何在body中增加元素
    这篇文章主要介绍了jquery如何在body中增加元素的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇jquery如何在body中增加元素文章都会有所收获,下面我们一起来看看吧。...
    99+
    2024-04-02
  • jquery如何增加子元素
    这篇“jquery如何增加子元素”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“jquery...
    99+
    2024-04-02
  • JQuery如何增加元素和删除元素
    这篇文章主要介绍了JQuery如何增加元素和删除元素,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。JQuery的增加元素,删除元素1. jQuery创建元素方法let&nbs...
    99+
    2023-06-27
  • jQuery如何在元素内部前置内容?
    这篇文章将为大家详细讲解有关jQuery如何在元素内部前置内容?,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。 jQuery 提供了多种方法在元素内部前置内容,包括: 1. prepend() 方法 p...
    99+
    2024-04-02
  • jquery如何动态增加元素
    这篇文章主要介绍“jquery如何动态增加元素”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“jquery如何动态增加元素”文章能帮助大家解决问题。 ...
    99+
    2024-04-02
  • jquery如何给元素增加classname
    本篇内容介绍了“jquery如何给元素增加classname”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!...
    99+
    2024-04-02
  • jquery如何增加一个元素
    这篇文章主要介绍了jquery如何增加一个元素的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇jquery如何增加一个元素文章都会有所收获,下面我们一起来看看吧。 ...
    99+
    2024-04-02
  • jquery如何给元素增加id
    这篇文章主要介绍了jquery如何给元素增加id的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇jquery如何给元素增加id文章都会有所收获,下面我们一起来看看吧。 ...
    99+
    2024-04-02
  • 通过awk在指定的列后面加内容
    [chenzx@sa ~]$ cat a.txt i am englinsh hhyou are oracle ll[chenzx@sa&n...
    99+
    2023-06-05
  • jquery如何给元素增加宽度
    本篇内容介绍了“jquery如何给元素增加宽度”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! ...
    99+
    2024-04-02
  • jquery如何增加一个li元素
    这篇文章主要介绍了jquery如何增加一个li元素的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇jquery如何增加一个li元素文章都会有所收获,下面我们一起来看看吧。 ...
    99+
    2024-04-02
  • jquery如何给元素增加类名
    这篇文章主要介绍了jquery如何给元素增加类名的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇jquery如何给元素增加类名文章都会有所收获,下面我们一起来看看吧。 ...
    99+
    2024-04-02
  • jquery如何去除元素内容
    这篇文章主要讲解了“jquery如何去除元素内容”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“jquery如何去除元素内容”吧! ...
    99+
    2024-04-02
  • jQuery如何清空元素内容?
    这篇文章将为大家详细讲解有关jQuery如何清空元素内容?,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。jQuery 清空元素内容 jQuery 提供了多种方法来清空元素的内容,以下是常用的方法: 1. ...
    99+
    2024-04-02
  • jQuery如何包裹元素内容?
    这篇文章将为大家详细讲解有关jQuery如何包裹元素内容?,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。 jQuery 拥有多种方法来包裹元素的内容,包括以下方法: 1. wrap() $("eleme...
    99+
    2024-04-02
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作