jQuery を使用してノードを作成および追加する方法の詳細な図による説明-jsチュートリアル-php.cn

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

yulia

リリース： 2018-10-12 14:42:05

オリジナル

4483 人が閲覧しました

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 を使用してノードを作成および追加する方法の詳細な図による説明

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() メソッドをすぐにマスターできると思います。できるだけ。関連チュートリアルの詳細については、