jQueryのappendメソッドを使用して要素を追加する方法-jsチュートリアル-php.cn

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

不言

リリース： 2018-12-28 17:35:09

オリジナル

6315 人が閲覧しました

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メソッドを使用して要素を追加する方法