ホームページ  >  記事  >  ウェブフロントエンド  >  jqueryで指定された要素の後にコンテンツを追加する方法

jqueryで指定された要素の後にコンテンツを追加する方法

青灯夜游
青灯夜游オリジナル
2022-05-17 11:35:498542ブラウズ

2 つの方法: 1. after() 構文 "$(指定された要素).after("新しいコンテンツ") を使用して、指定された要素の後に指定されたコンテンツを追加します。 2. insertAfter()、構文「$("コンテンツ値").insertAfter(指定された要素)」を使用して、指定された要素の後にコンテンツを挿入します。

jqueryで指定された要素の後にコンテンツを追加する方法

このチュートリアルの動作環境: Windows7 システム、jquery3.2.1 バージョン、Dell G3 コンピューター。

jquery で指定した要素の後にコンテンツを追加する方法

指定した要素の後にコンテンツを追加するには、指定した要素の後に兄弟要素を挿入します。 。 jquery は 2 つのメソッドを提供します:

  • after()

  • insertAfter()

after Both ( ) と insertAfter() は、選択された要素の後に指定されたコンテンツを挿入できますが、それらの操作オブジェクトは逆になります。以下で詳しく紹介していきましょう。

1. after() を使用します

$(A).after(B) は、A の外側の後に B を挿入することを意味します。

例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-3.2.1.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) は、B の外側の後に A を挿入することを意味します。

例:

<!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=&#39;color:pink;&#39;>这是一个新增的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 ビデオ チュートリアルWeb フロントエンド ビデオ]

以上がjqueryで指定された要素の後にコンテンツを追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。