在前端開發中，使用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方法。
remove方法可以刪除選定的元素及其所有子元素。範例程式碼如下：
$(document).ready(function() {
$("#removeBtn").click(function() {
$("#myDiv").remove();
});
});在上述範例程式碼中，點擊按鈕將刪除id為"myDiv"的元素及其所有子元素。
empty方法可以刪除選取元素的所有子元素，但保留選取元素本身。範例程式碼如下：
$(document).ready(function() {
$("#emptyBtn").click(function() {
$("#myDiv").empty();
});
});在上述範例程式碼中，點擊按鈕將保留id為"myDiv"的元素本身，但刪除該元素的所有子元素。
三、總結
透過上述介紹，我們可以看到使用jQuery動態新增或刪除div內容非常簡單。只要使用append方法新增內容，使用remove或empty方法刪除內容即可。在實際專案中，這個功能通常用於動態展示資料、增刪表單項目等。開發人員可以根據不同需求來對這個功能進行更多的使用和調整。
以上是jquery怎麼動態新增刪除div內容的詳細內容。更多資訊請關注PHP中文網其他相關文章！
