ホームページ > 記事 > ウェブフロントエンド > jqueryで指定された要素の後にコンテンツを追加する方法
jqueryで指定された要素の後にコンテンツを追加する方法
- 青灯夜游オリジナル
- 2022-05-17 11:35:498531ブラウズ
2 つの方法: 1. after() 構文 "$(指定された要素).after("新しいコンテンツ") を使用して、指定された要素の後に指定されたコンテンツを追加します。 2. insertAfter()、構文「$("コンテンツ値").insertAfter(指定された要素)」を使用して、指定された要素の後にコンテンツを挿入します。
このチュートリアルの動作環境: 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>
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='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 ビデオ チュートリアル、Web フロントエンド ビデオ]
以上がjqueryで指定された要素の後にコンテンツを追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。