jQueryのinsertBefore()メソッドの使い方

青灯夜游
リリース: 2021-04-22 15:31:02
オリジナル
5055 人が閲覧しました

jQuery の insertBefore() メソッドは、指定された要素の前に HTML コンテンツを挿入するために使用されます。その使用構文は「$(content).insertBefore(target)」です。

jQueryのinsertBefore()メソッドの使い方

この記事の動作環境: 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>
ログイン後にコピー

レンダリング:

jQueryのinsertBefore()メソッドの使い方

説明:

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>
ログイン後にコピー

レンダリング:

jQueryのinsertBefore()メソッドの使い方

上記がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。さらにエキサイティングなコンテンツについては、PHP 中国語 Web サイトの関連チュートリアルのコラムに注目してください。 ! !

以上がjQueryのinsertBefore()メソッドの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!