ホームページ > 記事 > ウェブフロントエンド > jQueryのinsertBefore()メソッドの使い方
jQueryのinsertBefore()メソッドの使い方
- 青灯夜游オリジナル
- 2019-02-14 15:05:035056ブラウズ
jQuery の insertBefore() メソッドは、指定された要素の前に HTML コンテンツを挿入するために使用されます。その使用構文は「$(content).insertBefore(target)」です。
この記事の動作環境: Windows 7 システム、Dell G3 コンピューター、jquery バージョン 3.2.1。
insertBefore() は jQuery の組み込みメソッドで、指定された要素の前に HTML コンテンツを挿入するために使用されます。 insertBefore()の使い方については以下の記事で紹介していますので、ご参考になれば幸いです。
jQuery の insertBefore() メソッド
insertBefore() メソッドは、指定された要素が出現するたびに HTML コンテンツを挿入します。 [ビデオチュートリアルの推奨: jQuery チュートリアル]
基本的な文構造:
$(content).insertBefore(target)
手順:
content: 指定されたターゲットの前に挿入する必要がある HTML コンテンツを示します。
target: 指定されたターゲットを示します。
InsertBefore() メソッドの使用例
例 1:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".demo").click(function() {
// insertBefore
$("<div>在PHP中文网中学习！</div>").insertBefore("p");
});
});
</script>
</head>
<body>
<div class="box">
<p>学习jQuery</p>
<div class="demo">单击此处</div>
</div>
</body>
</html>レンダリング:
説明:
DOM (ドキュメント オブジェクト モデル) がロードされ、ページ (画像を含む) が完全にレンダリングされると、準備完了イベントが発生します。ただし、ready() 関数は、ready イベントが発生したときに実行する必要があるコードを指定します。
$(".demo").click(): .demo 要素でクリック イベントが発生したときに実行する必要があるコードを示します。
例 2:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".demo").click(function() {
// insertBefore
$("<div>在PHP中文网中学习！</div>").insertBefore("p");
});
});
</script>
</head>
<body>
<div class="box">
<p>学习jQuery</p>
<p>学习php</p>
<div class="demo">单击此处</div>
</div>
</body>
</html>レンダリング:
上記がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。さらにエキサイティングなコンテンツについては、PHP 中国語 Web サイトの関連チュートリアルのコラムに注目してください。 ！ ！
以上がjQueryのinsertBefore()メソッドの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。