首頁 > web前端 > js教程 > 主體

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

不言
發布: 2018-12-28 17:35:09
原創
6296 人瀏覽過

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.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板