手册

目录

DOM 节点

收藏990

阅读599

更新时间2025-08-07

创建新 HTML 元素(节点)

如需向 HTML DOM 添加新元素,您必须首先创建这个元素(元素节点),然后将其追加到已有元素。

实例

这是一个段落。

这是另一个段落。

运行实例 »

点击 "运行实例" 按钮查看在线实例

例子解释

这段代码创建了一个新的

元素:

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

如需向

元素添加文本,则必须首先创建文本节点。这段代码创建了一个文本节点:

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

然后您需要向

元素追加这个文本节点:

para.appendChild(node);

最后您需要向已有元素追加这个新元素。

这段代码查找一个已有的元素:

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

这段代码向这个已有的元素追加新元素:

element.appendChild(para);

创建新 HTML 元素 - insertBefore()

前面例子中的 appendChild() 方法,追加新元素作为父的最后一个子。

除此之外您还可以使用 insertBefore() 方法:

实例

这是一个段落。

这是另一个段落。

运行实例 »

点击 "运行实例" 按钮查看在线实例

删除已有 HTML 元素

如需删除 HTML 元素,请使用 remove() 方法:

实例

This is a paragraph.

This is another paragraph.

运行实例 »

点击 "运行实例" 按钮查看在线实例

例子解释

这个 HTML 文档包含一个带有两个子节点(两个

元素)的

元素:

This is a paragraph.

This is another paragraph.

找到需要删除的元素:

const elmnt = document.getElementById("p1");

然后对该元素执行 remove() 方法:

elmnt.remove();

注意:remove() 方法在旧浏览器中不起作用,请参阅下面的例子,了解如何改用 removeChild()

删除子节点

对于不支持 remove() 方法的浏览器,您必须找到父节点才能删除一个元素:

实例

This is a paragraph.

This is another paragraph.

运行实例 »

点击 "运行实例" 按钮查看在线实例

例子解释

此 HTML 文档包含一个带有两个子节点(两个

元素)的

元素:

This is a paragraph.

This is another paragraph.

找到 id="div1" 的元素:

const parent = document.getElementById("div1");

找到 id="p1"

元素:

const child = document.getElementById("p1");

从父元素中删除子:

parent.removeChild(child);

这是一个常见的解决方法:找到要删除的子节点,并使用其 parentNode 属性找到父节点:

const child = document.getElementById("p1");
child.parentNode.removeChild(child);

替换 HTML 元素

如需替换元素的,请使用 replaceChild() 方法:

实例

这是一个段落。

这是另一个段落。

运行实例 »

点击 "运行实例" 按钮查看在线实例

相关

视频

RELATED VIDEOS

更多

免费

Web前端开发极速入门
初级 Web前端开发极速入门

219920次学习

收藏

免费

前端入门_HTML5
初级 前端入门_HTML5

616946次学习

收藏

免费

30分钟学会网站布局
初级 30分钟学会网站布局

238440次学习

收藏

免费

CSS视频教程-玉女心经版
初级 CSS视频教程-玉女心经版

393054次学习

收藏

免费

独孤九贱(1)_HTML5视频教程

免费

独孤九贱(6)_jQuery视频教程

免费

独孤九贱(7)_Bootstrap视频教程

免费

独孤九贱(2)_CSS视频教程
初级 独孤九贱(2)_CSS视频教程

229605次学习

收藏

科技资讯

更多

精选课程

更多
前端入门_HTML5
前端入门_HTML5

共29课时

61.7万人学习

CSS视频教程-玉女心经版
CSS视频教程-玉女心经版

共25课时

39.3万人学习

JavaScript极速入门_玉女心经系列
JavaScript极速入门_玉女心经系列

共43课时

70.9万人学习

独孤九贱(1)_HTML5视频教程
独孤九贱(1)_HTML5视频教程

共25课时

61.6万人学习

独孤九贱(2)_CSS视频教程
独孤九贱(2)_CSS视频教程

共22课时

23万人学习

独孤九贱(3)_JavaScript视频教程
独孤九贱(3)_JavaScript视频教程

共28课时

33.9万人学习

独孤九贱(4)_PHP视频教程
独孤九贱(4)_PHP视频教程

共89课时

125万人学习

关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号