ホームページ  >  記事  >  ウェブフロントエンド  >  jQueryのappendメソッドを使用して要素を追加する方法

jQueryのappendメソッドを使用して要素を追加する方法

不言
不言オリジナル
2018-12-28 17:35:096283ブラウズ

appendメソッドはHTML要素を動的に追加できるメソッドで、任意の行数を追加することができてとても便利です。追加メソッド。

jQueryのappendメソッドを使用して要素を追加する方法のappendメソッドを使用して要素を追加する方法のappendメソッドを使用して要素を追加する方法

append メソッドの使用方法

$(‘选择器’).append(‘添加的内容’);

セレクターでクラスと ID を指定した後、append を呼び出して追加するものを指定します。

具体的な例を見てみましょう

ボタンをクリックして ul タグに li 要素を追加します。コードは次のとおりです。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
      $(function() {
        $("button").click(function() {
          $("ul").append("<li>添加的内容</li>");
        });
      });
    </script>
  </head>
  <body>
    <button>button</button>
    <ul>
    </ul>
  </body>
</html>

次の場合にトリガーされるイベントを作成します。ボタンがクリックされ、その中の append メソッドが実行されます。

セレクターの append メソッドを記述し、ul タグを指定してセレクターに li タグを追加します。

したがって、ボタンが押されるたびに、append メソッドが呼び出され、要素の数が増加します。

ブラウザ上での表示効果は以下の通りです

jQueryのappendメソッドを使用して要素を追加する方法のappendメソッドを使用して要素を追加する方法のappendメソッドを使用して要素を追加する方法

#ボタンボタンをクリックすると、クリックするたびにコンテンツが表示されます。 5 回のクリックの効果は次のとおりです。

jQueryのappendメソッドを使用して要素を追加する方法のappendメソッドを使用して要素を追加する方法のappendメソッドを使用して要素を追加する方法

この記事はここで終了です。さらに興味深い内容については、PHP 中国語 Web サイトの関連チュートリアルの列に注目してください。 ! !

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

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

関連記事

続きを見る