ホームページ > ウェブフロントエンド > jsチュートリアル > jqueryのappend、prepend、beforeおよびafterメソッドの違い

jqueryのappend、prepend、beforeおよびafterメソッドの違い

巴扎黑
リリース: 2017-06-24 11:20:20
オリジナル
1598 人が閲覧しました

after( ) と

Before
.html" target="_blank">before

() を使用します

仮想コードも使用します:
<p class=&#39;a&#39;> //<---you want p c to append in this
  <p class=&#39;b&#39;>b</p>
</p>
ログイン後にコピー
ログイン後にコピー
効果は次のとおりです:
$(&#39;.a&#39;).append($(&#39;.c&#39;));
ログイン後にコピー
ログイン後にコピー

before() も使用します

<p class=&#39;a&#39;> //<---you want p c to append in this
  <p class=&#39;b&#39;>b</p>
  <p class=&#39;c&#39;>c</p>
</p>
ログイン後にコピー
ログイン後にコピー

効果は次のとおりです:

$(&#39;.a&#39;).prepend($(&#39;.c&#39;));
ログイン後にコピー

概要:

append() と prepend() は要素内にコンテンツを挿入します (コンテンツは要素の子要素またはノードになります)。after() と before() は挿入します要素の外側のコンテンツ (コンテンツは要素の兄弟ノードになります)

1. append() と prepend()

<p class=&#39;a&#39;> //<---you want p c to append in this
  <p class=&#39;c&#39;>c</p>
  <p class=&#39;b&#39;>b</p>

</p>
ログイン後にコピー

$(&#39;.a&#39;).after($(&#39;.c&#39;));
ログイン後にコピー

を使用すると仮定します。その効果は次のとおりです。

<p class=&#39;a&#39;>
  <p class=&#39;b&#39;>b</p></p><p class=&#39;c&#39;>c</p>
ログイン後にコピー

効果は次のとおりです:

$(&#39;.a&#39;).before($(&#39;.c&#39;));
ログイン後にコピー

2. after() を使用します before() と同じ仮想コードを使用します

:

<p class=&#39;c&#39;>c</p><p class=&#39;a&#39;>
  <p class=&#39;b&#39;>b</p></p>
ログイン後にコピー

効果は次のとおりです:

<p class=&#39;a&#39;> //<---you want p c to append in this
  <p class=&#39;b&#39;>b</p>
</p>
ログイン後にコピー
ログイン後にコピー

同様に before() を使用します

$(&#39;.a&#39;).append($(&#39;.c&#39;));
ログイン後にコピー
ログイン後にコピー
効果は次のとおりです:
<p class=&#39;a&#39;> //<---you want p c to append in this
  <p class=&#39;b&#39;>b</p>
  <p class=&#39;c&#39;>c</p>
</p>
ログイン後にコピー
ログイン後にコピー

概要:

append() と prepend() は要素 Content に挿入され (コンテンツは要素の子要素またはノードになります)、after() と before() はコンテンツを外側に挿入します要素 (コンテンツは要素の兄弟ノードになります)

以上がjqueryのappend、prepend、beforeおよびafterメソッドの違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のおすすめ
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート