jquery怎麼動態新增刪除div內容

在前端開發中，使用jQuery動態新增或刪除頁面元素是一種非常常見的需求。本文將介紹如何使用jQuery實作在頁面中動態新增或刪除div內容的功能。

一、新增div內容

新增div內容最基本的方法是使用jQuery的append方法。此方法可以在已有的元素末尾新增一個元素。

範例程式碼如下：

$(document).ready(function() {
    $("#addBtn").click(function() {
        $("#myDiv").append("<p>这是新的一行内容。</p>")
    });
});

在上述範例程式碼中，透過點擊一個按鈕觸發事件，在id為"myDiv"的元素末尾新增一行新的p元素。這個p元素包含了需要添加的內容，可以是任何html標籤和文字。

如果需要新增多行內容，可以將上述範例程式碼的append方法中的內容改為需要新增的html程式碼。也可以利用循環來重複添加相同的內容，例如：

$(document).ready(function() {
    $("#addBtn").click(function() {
        for(var i = 0; i < 5; i++) {
            $("#myDiv").append("<p>这是新的一行内容。</p>");
        }
    });
});

在上述範例程式碼中，點擊按鈕將向id為"myDiv"的元素末尾添加5行新的p元素，每行包含相同的html代碼。

二、刪除div內容

使用jQuery刪除div內容的方法也很簡單，可以使用remove或empty方法。

1. remove方法

remove方法可以刪除選定的元素及其所有子元素。範例程式碼如下：

$(document).ready(function() {
    $("#removeBtn").click(function() {
        $("#myDiv").remove();
    });
});

在上述範例程式碼中，點擊按鈕將刪除id為"myDiv"的元素及其所有子元素。

2. empty方法

empty方法可以刪除選取元素的所有子元素，但保留選取元素本身。範例程式碼如下：

$(document).ready(function() {
    $("#emptyBtn").click(function() {
        $("#myDiv").empty();
    });
});

在上述範例程式碼中，點擊按鈕將保留id為"myDiv"的元素本身，但刪除該元素的所有子元素。

三、總結

透過上述介紹，我們可以看到使用jQuery動態新增或刪除div內容非常簡單。只要使用append方法新增內容，使用remove或empty方法刪除內容即可。在實際專案中，這個功能通常用於動態展示資料、增刪表單項目等。開發人員可以根據不同需求來對這個功能進行更多的使用和調整。

以上是jquery怎麼動態新增刪除div內容的詳細內容。更多資訊請關注PHP中文網其他相關文章！