jQuery の insertBefore()、insertAfter()、after()、before() の違いの概要-jsチュートリアル-php.cn

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

巴扎黑

リリース： 2017-06-24 13:17:31

オリジナル

1370 人が閲覧しました

この記事では、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 サイトの他の関連記事を参照してください。

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

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