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