JavaScript 動態列表是前端 Web 開發中非常常見的一種功能。它使得我們可以在頁面上展示、瀏覽、編輯、刪除等等一系列的數據操作，為我們的 Web 程序帶來極大的便捷性。下面就讓我們來一起了解一下 JavaScript 動態列表的相關知識吧！
要實現 JavaScript 動態列表，首先我們需要一個 HTML 頁面。我們可以使用一個簡單的 HTML 列表作為例子來介紹這個功能。這個列表需要有添加、編輯、刪除的按鈕，以及一些默認的樣式。代碼如下：
<html> <head> <title>JavaScript 動態列表</title> </head> <body> <h1>JavaScript 動態列表</h1> <ul id="myList"> <li>列表項1</li> <li>列表項2</li> <li>列表項3</li> </ul> <button id="addButton">添加</button> <button id="editButton">編輯</button> <button id="deleteButton">刪除</button> </body> </html>
在 HTML 頁面中，我們需要使用一些 JavaScript 代碼來實現動態列表。下面是一個簡單的 JavaScript 函數，用來在列表中添加一個新的項：
function addItem() {
var item = prompt("請輸入新的列表項：");
var list = document.getElementById("myList");
var newItem = document.createElement("li");
newItem.appendChild(document.createTextNode(item));
list.appendChild(newItem);
}這個函數使用 JavaScript 中的 prompt() 方法獲取用戶輸入的值，并將它放入一個新建的列表項中。然后，它通過調用 createElement() 方法創建一個新的 HTML 元素，并將用戶輸入的內容放入其中。最后，它使用 appendChild() 方法將新的列表項添加到 HTML 列表中。
接下來我們需要為添加按鈕添加一個監聽器，當用戶點擊這個按鈕時，就能夠觸發 addItem() 函數：
document.getElementById("addButton").addEventListener("click", addItem);同樣，我們需要創建一個用于編輯列表項的函數。下面是一個簡單的示例：
function editItem() {
var item = prompt("請輸入修改后的列表項：");
var selectedItem = document.querySelector("li.selected");
selectedItem.innerHTML = item;
}這個函數獲取用戶輸入的值，并將它替換當前選定的列表項中的文本內容。現在我們需要為編輯按鈕添加一個監聽器，并提供必要的邏輯來監聽用戶的操作：
document.getElementById("editButton").addEventListener("click", function() {
var selectedItem = document.querySelector("li.selected");
if (selectedItem) {
editItem();
}
});最后，我們需要為刪除按鈕創建一個類似的監聽器，以及實現一個函數來刪除選定的列表項：
function deleteItem() {
var selectedItem = document.querySelector("li.selected");
selectedItem.parentNode.removeChild(selectedItem);
}
document.getElementById("deleteButton").addEventListener("click", function() {
var selectedItem = document.querySelector("li.selected");
if (selectedItem) {
deleteItem();
}
});通過這些簡單的代碼，我們就可以實現一個基本的 JavaScript 動態列表了！這個列表將會非常方便，讓我們不僅僅可以在頁面上展示數據，還能夠對數據進行實時編輯哦！