jQuery を使用してノードを作成および追加する方法の詳細な図による説明

yulia
リリース: 2018-10-12 14:42:05
オリジナル
4503 人が閲覧しました

jQuery は JavaScript をベースにしたフレームワークで、そのシンプルさと利便性から広く使用されています。jQuery でノードを作成および追加する方法をご存知ですか?この記事では、jQuery を使用してノードを作成し、ノードを追加する方法について説明します。これには特定の参照値があり、興味のある友人はそれを参照できます。

#注: jQuery を使用する場合は、まず jQuery ファイル

# を導入する必要があります。 ##メソッド 1、append() メソッド

append() はノードを追加し、選択した要素の最後に追加できます

例: ドラゴン フルーツを要素の最後に追加します。順序なしリスト この項目

説明: まず、

  • 要素の親ノードを検索し、最後にこのノードを
      ノードに追加します。コードは次のとおりです:
      <!DOCTYPE html>
      <html>
       <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
       </head>
       <body>
        <ul>
         <li>榴莲</li>
         <li>西瓜</li>
         <li>橘子</li>
         <li>雪梨</li>
        </ul>
        <button id="btn">点击添加</button>
       </body>
       <script type="text/javascript">
        $(document).ready(function(){
            $("#btn").click(function(){
                $("ul").append(" <li>火龙果</li>");
            });      
        });
       </script>
      </html>
      ログイン後にコピー

      効果は図に示すとおりです:

      jQuery を使用してノードを作成および追加する方法の詳細な図による説明

      メソッド 2、prepend() メソッド

      prepend() メソッドは、選択した要素の先頭に追加されるノードを追加できます。


      例: ドラゴン フルーツを順序なしリストの最初の要素として追加します

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

      <!DOCTYPE html>
      <html>
       <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
       </head>
       <body>
        <ul>
         <li>榴莲</li>
         <li>西瓜</li>
         <li>橘子</li>
         <li>雪梨</li>
        </ul>
        <button id="btn">点击添加</button>
       </body>
       <script type="text/javascript">
        $(document).ready(function(){
            $("#btn").click(function(){
                $("ul").prepend(" <li>火龙果</li>");
            });      
        });
       </script>
      </html>
      ログイン後にコピー

      結果は図に示すとおりです:

      さらに、after() メソッドと before() メソッドがあります。方法。 jQuery の after() メソッドは選択した要素の後にコンテンツを挿入し、before() メソッドは選択した要素の前にコンテンツを挿入します。本質は append() および prepend() と似ているため、ここでは説明しません。 jQuery を使用してノードを作成および追加する方法の詳細な図による説明
      上記は、jQuery でノードを作成し、ノードを追加する方法を紹介しています。興味のある方は、after() メソッドと before() メソッドをすぐにマスターできると思います。できるだけ。関連チュートリアルの詳細については、

      jQuery ビデオ チュートリアル

      をご覧ください。

  • 以上がjQuery を使用してノードを作成および追加する方法の詳細な図による説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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