ホームページ > 記事 > ウェブフロントエンド > jQuery の insertBefore()、insertAfter()、after()、before() の違いの概要

jQuery の insertBefore()、insertAfter()、after()、before() の違いの概要

巴扎黑オリジナル: 2017-06-24 13:17:311364ブラウズ

この記事では、jQueryのinsertBefore()、after()、before()の違いに関する関連情報を主に紹介します。 can 参考までに、

insertBefore():a.insertBefore(b)

aが前、bが後ろ、

a:はセレクター、b:もセレクター

<!DOCTYPE html>
<html>
<head>
<meta charset=&#39;UTF-8&#39;>
<title>jqu</title>
<script type="text/javascript" src=&#39;jquery-2.2.0.min.js&#39;></script>
</head>
<body>
<p class=&#39;p1&#39;>p1:hello</p>
hello world
<p class=&#39;p2&#39;>p2:wenwen</p>
hello wo
</body>
<script type="text/javascript">
$(function(){
$(&#39;.p2&#39;).insertBefore(&#39;.p1&#39;);
})
</script>
</html>

Get:

p2:wenwen
p1:hello
hello world hello wo

insertAfter(): insertBefore()と同じです

a.insertAfter(b)

aは後、bは前になります

今度はbefore()です

before():a.before()

a はすでにページ上にあるセレクター、b は追加する必要があるコンテンツ、注意: それはそのままであり、タグを認識します、b は a ではありませんselector

a 後ろに、b 前に

<!DOCTYPE html>
<html>
<head>
<meta charset=&#39;UTF-8&#39;>
<title>jqu</title>
<script type="text/javascript" src=&#39;jquery-2.2.0.min.js&#39;></script>
</head>
<body>
<p class=&#39;p1&#39;>p1:hello</p>
<p class=&#39;p2&#39;>p2:wenwen</p>
</body>
<script type="text/javascript">
$(function(){
$(&#39;.p2&#39;).before(&#39;.p1&#39;);
})
</script>
</html>

最後に、

p1:hello
.p1
p2:wenwen

を手に入れました。 .p1 はセレクターを認識しません。.p2 セレクターの前に直接

string があります

after(): 一方が前にあり、もう一方が

の後にあることを除いて、before() と同じです。

私が言いたいのは、insertBefore()、insertAfter() と before()、after() の位置を入れ替える必要がある場合の最大の違いだと思います。 2 つのセレクターは、

insertBefore()、insertAfter() を使用するだけです

テキストと位置を交換するセレクターが必要な場合は、before()、after() を使用できます。位置の交換

位置を切り替えるということは、その位置がページ上にすでに存在していることを意味します。このメソッドは、次のようなページ上にないものを追加することもできます:

$(&#39;<p class=&#39;p3&#39;>嘿嘿</p>&#39;).insertBefore(&#39;.p1&#39;);

以上がjQuery の insertBefore()、insertAfter()、after()、before() の違いの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：jQuery.before()関数の詳しい説明次の記事：jQuery.before()関数の詳しい説明

続きを見る