jqueryはdivに要素を追加できますか?-フロントエンドQ&A-php.cn

jqueryはdivに要素を追加できますか?

青灯夜游

リリース： 2022-04-21 13:09:49

オリジナル

5044 人が閲覧しました

jquery は div に要素を追加できます。方法: 1. "$("div").append(new element)" を使用して div の末尾に新しい要素を追加します; 2. "$(new element)" を使用しますelement).appendTo("div")" ステートメント; 3. "$("div").prepend(new element)" を使用します。

jqueryはdivに要素を追加できますか?

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

jquery は div に要素を追加できます。

div に要素を追加するということは、div にサブ要素を追加することを意味します。jquery には、サブ要素を追加するためのさまざまなメソッドが用意されています。この記事では、それらを紹介します。

#jquery を使用して div に子要素を追加する 4 つの方法

方法 1: append() メソッドを使用する

append() メソッドを使用して、div 要素内の「end」に子要素を追加します。

構文:

$(A).append(B)

ログイン後にコピー

は、A の最後に B を挿入することを意味します。

例:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(function () {
            $("#btn").click(function () {
                var newp = "<p>一个新段落</p>";
                $("div").append(newp);
            })
        })
    </script>
	</head>
	<body>
		<div style="background-color: #FF0000;">
			<p>第一段文本</p>
			<p>第二段文本</p>
			<p>第三段文本</p>
		</div>
		<input id="btn" type="button" value="插入" />
	</body>
</html>

ログイン後にコピー

jqueryはdivに要素を追加できますか?

方法 2: appendTo() メソッドを使用する

appendTo() は次のこともできます。 be div 要素内の「最後」に子要素を追加します。

appendTo( ) と append( ) の 2 つのメソッドは同様の機能を持ちますが、操作対象が逆になります。

構文:

$(A).appendTo(B)

ログイン後にコピー

は、B の最後に A を挿入することを意味します。

例:

$(function () {
	$("#btn").click(function () {
		var newp = "<p>一个新段落</p>";
		$(newp).appendTo("div");
		
	})
})

ログイン後にコピー

jqueryはdivに要素を追加できますか?

方法 3: prepend( )

prepend( ) メソッドを使用するdiv要素内の「先頭」に子要素を追加できます。

構文:

$(A).prepend(B)

ログイン後にコピー

は、A の先頭に B を挿入することを意味します。

例:

$(function () {
	$("#btn").click(function () {
		var newp = "<p>一个新段落</p>";
		$("div").prepend(newp);
	})
})

ログイン後にコピー

jqueryはdivに要素を追加できますか?

方法 4: prependTo( )

prependTo を使用する( ) は、div 要素内の「始まり」に子要素を追加することもできます。

2 つのメソッド prependTo( ) と prepend( ) は同様の機能を持ちますが、操作対象が逆になります。

構文:

$(A).prependTo(B)

ログイン後にコピー

は、A を B の先頭に挿入することを意味します。

例:

$(function () {
	$("#btn").click(function () {
		var newp = "<p>一个新段落</p>";
		$(newp).prependTo("div");
		
	})
})

ログイン後にコピー

jqueryはdivに要素を追加できますか?

[推奨学習:

jQuery ビデオチュートリアル、Web フロントエンドビデオ]

以上がjqueryはdivに要素を追加できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。