JavaScript HTML DOM 元素（节点）-优快云博客

本文介绍如何使用JavaScript来创建新的HTML元素并将其添加到页面中，同时演示了如何删除现有的HTML元素。

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

创建新的 HTML 元素

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

实例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<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 元素，您必须首先获得该元素的父元素：

实例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
    <div id="div2">
    	<p id="p3">这是第一个段落</p>
        <p id="p4">这是第二个段落</p>
    </div>
    <script>
    	var parent = document.getElementById("div2");
		var child = document.getElementById(
		"p3");
		parent.removeChild(child);
    </script>
</body>
</html>

效果图：