JavaScript HTML DOM 元素（节点）

最新推荐文章于 2025-06-16 17:56:09 发布

原创最新推荐文章于 2025-06-16 17:56:09 发布 · 765 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript内置对象专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用JavaScript操作HTML DOM元素，包括创建新元素并添加到现有文档中，以及如何删除已有的HTML元素。

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

如需向HTML DOM 添加新元素，必须创建该元素（元素节点），然后向一个已存在的元素追加该元素。

创建新的<p>元素：

var para = document.createElement("p");

如需向<p>元素添加文本，必须首先创建文本的节点。创建节点：

var node = document.createTextNode("这是一个新的段落。");

然后向<p>元素追加这个文本节点：

para.appendChild(node);

向已有的元素追加这个新的元素。

找到一个已有元素：

var element = document.getElementById("div1");

向已有元素追加新元素：

element.appendChild(para);

<html>
<body>
<div id = "div1">
    <p id = "p1">这是一个段落。</p>
    <p id = "p2">这是另一个段落。</p>
</div>
<script>
    var para = document.createElement("p");
    var node = document.createTextNode("这是新的段落");
    para.appendChild(node);
    var element = document.getElementById("div1");
    element.appendChild(para);
</script>
</body>
</html>

删除已有的HTML 元素

这个HTML是含有两个子节点（两个<p>元素）的<div>元素：

<p id = "p1">这是一个段落。</p>

<p id = "p2">这是另一个段落。</p>

</div>

首先找到id = "div1"的元素：

var parent = getElementById("div1");

然后找到id = "p1"的元素：

var child = getElementById("p1");

从父元素中删除子元素：

parent.removeClild(child);

<html>
<body>
<div id = "div1">
    <p id = "p1">
        这是一个段落。
    </p>
    <p id = "p2">
        这是另一个段落。
    </p>
</div>
<script>
    var parent = document.getElementById("div1");
    var child = document.getElementById("p1");
    parent.removeChild(child);
</script>
</body>
</html>

有一点切记要在那里加上documen ！！！