createElement 和 appendChild

Coddy JavaScript DOM 方法课程的第 12 课，共 13 课。

函数 createElement() 使用指定的标签名创建一个新的 HTML 元素（例如，div、p、span）。例如：

const newElement = document.createElement("p");

函数 appendChild() 会将指定的子元素作为另一个元素的最后一个子元素插入。这样你就可以构建和修改网页内容的层级结构。例如：

const childElement = document.createElement("p");
childElement.textContent = "This is a new child element.";
parentElement.appendChild(childElement);

在上面的示例中，我们创建了一个新元素 p，并将它添加到 parentElement 元素中。

挑战

简单

给你一段 HTML 代码，其中包含一个 ID 为 myList 的无序列表。

只能使用 JavaScript，在无序列表中添加另一个列表项，并将文本 "Dog" 添加到其中。

亲手试试

<!DOCTYPE html>
<html>
    <body>
        <ul id="animals">
            <li>Cow</li>
            <li>Ant</li>
            <li>Bear</li>
            <li>Camel</li>
        </ul>
        <script src="script.js"></script>
    </body>
</html>

JavaScript DOM 方法中的所有课

1简介

简介文档对象模型

2DOM 方法 I

getElementById 修改元素样式 getElementsByClassName 遍历并操作 getElementsByTagName querySelector

3DOM 方法 II

querySelectorAll addEventListener innerHTMLcreateElement 和 appendChildclassList 切换

自己练习： Web 在线编辑器