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 相关的图片示例:

DOM_structure
HTML_elements