append、prepend、before などの要素を追加するための jQuery メソッド

jQuery - append、prepend、beforeなど、要素を追加する方法はたくさんあります。以下は詳細な紹介です

1.jQuery append() メソッド

jQuery append() メソッドは、選択した要素の末尾にコンテンツを挿入します。
例

コードは次のとおりです:

$("p").append("追加されたテキスト。");

2.jQuery prepend() メソッド

jQuery prepend() メソッドは、選択した要素の先頭にコンテンツを挿入します
例

コードは次のとおりです:

$( "p").prepend("先頭に追加されたテキスト。");

3、after() メソッドと before() メソッド jQuery after() メソッドは、選択した要素の後にコンテンツを挿入します。
例

コードは次のとおりです:

$("img").after("Some text before");

エディターは以下にいくつかの詳細を追加します

append() メソッドは、選択した要素の最後にコンテンツを挿入します。

prepend() メソッドは、選択した要素の先頭にコンテンツを挿入します。このメソッドは、選択した要素の後にコンテンツを挿入します。要素を選択する前にコンテンツを挿入します。

デモ コード:

<script type="text/javascript" src="http://common.jb51.net/jslib/jquery/jquery.min.js"></script>
<p class="testp">
  <ul>
    <li>第一个li标签</li>
  </ul>
</p>

<script>

  //append
  $(&#39;.testp ul&#39;).append(&#39;<li>append 插入的li</li>&#39;);
  //prepend
  $(&#39;.testp ul&#39;).prepend(&#39;<li>prepend 插入的li</li>&#39;);
  //after
  $(&#39;.testp ul&#39;).after(&#39;<li>after 插入的li</li>&#39;);
  //before
  $(&#39;.testp ul&#39;).before(&#39;<li>before 插入的li</li>&#39;);

</script>

実行後のレンダリング:

html 構造図

以上がappend、prepend、before などの要素を追加するための jQuery メソッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。