ホームページ > 記事 > ウェブフロントエンド > jqueryはdivに要素を追加できますか?
jqueryはdivに要素を追加できますか?
- 青灯夜游オリジナル
- 2022-04-21 13:09:375005ブラウズ
jquery は div に要素を追加できます。方法: 1. "$("div").append(new element)" を使用して div の末尾に新しい要素を追加します; 2. "$(new element)" を使用しますelement).appendTo("div")" ステートメント; 3. "$("div").prepend(new element)" を使用します。
このチュートリアルの動作環境: 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>
方法 2: appendTo() メソッドを使用する
appendTo() は次のこともできます。 be div 要素内の「最後」に子要素を追加します。appendTo( ) と append( ) の 2 つのメソッドは同様の機能を持ちますが、操作対象が逆になります。構文:
$(A).appendTo(B)は、B の最後に A を挿入することを意味します。
$(function () {
$("#btn").click(function () {
var newp = "<p>一个新段落</p>";
$(newp).appendTo("div");
})
})
方法 3: prepend( )
prepend( ) メソッドを使用するdiv要素内の「先頭」に子要素を追加できます。 構文:$(A).prepend(B)は、A の先頭に B を挿入することを意味します。
$(function () {
$("#btn").click(function () {
var newp = "<p>一个新段落</p>";
$("div").prepend(newp);
})
})
方法 4: prependTo( )
2 つのメソッド prependTo( ) と prepend( ) は同様の機能を持ちますが、操作対象が逆になります。構文:
$(A).prependTo(B)は、A を B の先頭に挿入することを意味します。 例:
$(function () {
$("#btn").click(function () {
var newp = "<p>一个新段落</p>";
$(newp).prependTo("div");
})
})
jQuery ビデオ チュートリアル、Web フロントエンド ビデオ]
以上がjqueryはdivに要素を追加できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：React のキーの用途は何ですか?次の記事：React のキーの用途は何ですか?