community-forum/exercises/DOM_Exercise_3

DOM 练习 3：动态添加列表项

在这个练习中，我们将学习如何使用 DOM 来动态添加列表项到 HTML 页面中。

1. 初始页面

首先，我们有一个简单的 HTML 页面，包含一个空的 ul 列表：

<ul id="myList"></ul>

2. JavaScript 代码

接下来，我们将编写一个 JavaScript 函数，用于向列表中添加新的列表项：

function addListItem() {
    var list = document.getElementById("myList");
    var newItem = document.createElement("li");
    newItem.textContent = "这是新添加的列表项！";
    list.appendChild(newItem);
}

3. 添加按钮

为了使添加列表项的操作更直观，我们可以在页面上添加一个按钮：

<button onclick="addListItem()">添加列表项</button>

4. 扩展阅读

想了解更多关于 DOM 的知识？可以访问我们网站的 DOM 教程。

5. 图片示例

以下是一些 DOM 相关的图片示例：