首頁 > 文章 > web前端 > 如何使用jQuery中append方法加入元素

如何使用jQuery中append方法加入元素

不言原創: 2018-12-28 17:35:096232瀏覽

append方法是一種可以動態加入html元素的方法，使用append方法非常方便，你可以在新增任意多少行html元素，這篇文章我們就來介紹關於append方法添加元素的方法。

如何使用如何使用如何使用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方法加入元素

當點擊button按鈕時，每點擊一下就會出現一個內容，點擊五下的效果如下：

如何使用如何使用如何使用jQuery中append方法加入元素中append方法加入元素中append方法加入元素

這篇文章到這裡就全部結束了，更多精彩內容大家可以追蹤php中文網相關教學欄位！！！

以上是如何使用jQuery中append方法加入元素的詳細內容。更多資訊請關注PHP中文網其他相關文章！

php jquery html append 事件选择器 ul li

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：如何使用Node.js建立模組（module）下一篇：如何使用Node.js建立模組（module）

看更多

Jquery append方法使用上的問題