圖文詳解jQuery建立節點與新增節點的方法-js教程-PHP中文網

圖文詳解jQuery建立節點與新增節點的方法

yulia

發布： 2018-10-12 14:42:05

原創

4483 人瀏覽過

jQuery是基於JavaScript的框架，因為簡潔方便而被廣泛使用，那你知道jQuery怎麼創建和添加節點嗎？這篇文章就跟大家講說jQuery創建節點和加入節點的方法，有一定的參考價值，有興趣的朋友可以參考一下。

註：使用jQuery時，一定要先引入jQuery檔案

方法一、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()方法

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>

登入後複製

效果如圖所示：

圖文詳解jQuery建立節點與新增節點的方法
除此之外，還有after()方法，before()方法。 jQuery中的after()方法在被選元素之後插入內容，before()方法在被選元素之前插入內容，實質與append()、prepend()類似，這裡不做示範。