javascript创建新元素并增加到DOM

最新推荐文章于 2025-06-01 22:51:08 发布

Gorzing

最新推荐文章于 2025-06-01 22:51:08 发布

阅读量1.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：笔记文章标签： javascript js

本文链接：https://blog.youkuaiyun.com/qq_46358639/article/details/104418734

笔记专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何使用JavaScript创建新的DOM元素并将其添加到现有元素的子节点中。通过示例代码展示了如何在HTML的`<ul>`元素中动态插入新元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

javascript创建新元素并增加到DOM

今天学到的新知识
## 总结：

要把一个新元素增加到DOM，首先需要创建这个元素，然后增加这个元素作为某个元素的子元素。
使用document.createElement(elementName)可以创建一个新元素。
要在DOM中增加一个元素作为某个父元素的子元素，需要得到这个父元素的句柄，并对父元素调用appendChild(),传入要增加的子元素。

话不多说，直接上例子：
先看下列HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script>
        
    </script>
    <title>Document</title>
</head>
<body>
    <ul id="list">
	<!--这里什么都没有-->
    </ul>
</body>
</html>

可以看到，ul元素中并没有任何内容，我们要做的就是对其中间添加内容。

下面来看我们准备向script元素中添加的js代码：

function init() {
	var newli = document.createElement("li");
	//创造一个新的li元素
	newli.innerHTML = "This is text.";
	//向元素中插入文本
	var ul = document.getElementById("list");
	//得到父元素的句柄，才能在它下面添加新元素
	ul.appendChild(newli);
	//成功将新元素添加到ul元素中
}

window.onload = init;
//注意，必须要网页加载完成之后才可以访问DOM,否则会失败