jQueryのinsertBefore()メソッドの使い方-jsチュートリアル-php.cn

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

青灯夜游

リリース： 2021-04-22 15:31:02

オリジナル

5063 人が閲覧しました

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()メソッドの使い方