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

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

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

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中文網其他相關文章!

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