IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript教程 -> JavaScript HTML DOM 元素 (节点) -> 正文阅读

[JavaScript教程]JavaScript HTML DOM 元素 (节点)

JavaScript HTML DOM 元素 (节点)

本章节介绍如何向文档中添加和移除元素(节点)。


创建新的 HTML 元素 (节点) - appendChild()

要创建新的 HTML 元素 (节点)需要先创建一个元素,然后在已存在的元素中添加它。

实例

<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>

尝试一下 ?

实例解析

以下代码是用于创建 <p> 元素:

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

为 <p> 元素创建一个新的文本节点:

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

将文本节点添加到 <p> 元素中:

para.appendChild(node);

最后,在一个已存在的元素中添加 p 元素。

查找已存在的元素:

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

添加到已存在的元素中:

element.appendChild(para);

创建新的 HTML 元素 (节点) - insertBefore()

以上的实例我们使用了 appendChild() 方法,它用于添加新元素到尾部。

如果我们需要将新元素添加到开始位置,可以使用 insertBefore() 方法:

实例

<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"); var child = document.getElementById("p1"); element.insertBefore(para, child); </script>

尝试一下 ?

移除已存在的元素

要移除一个元素,你需要知道该元素的父元素。

实例

<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>

尝试一下 ?

注意:早期的 Internet Explorer 浏览器不支持 node.remove() 方法。

实例解析

HTML 文档中 <div> 元素包含两个子节点 (两个 <p> 元素):

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

查找 id="div1" 的元素:

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

查找 id="p1" 的 <p> 元素:

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

从父元素中移除子节点:

parent.removeChild(child);
lamp 如果能够在不引用父元素的情况下删除某个元素,就太好了。
不过很遗憾。DOM 需要清楚您需要删除的元素,以及它的父元素。

以下代码是已知要查找的子元素,然后查找其父元素,再删除这个子元素(删除节点必须知道父节点):

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

替换 HTML 元素 - replaceChild()

我们可以使用 replaceChild() 方法来替换 HTML DOM 中的元素。

实例

<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 parent = document.getElementById("div1"); var child = document.getElementById("p1"); parent.replaceChild(para, child); </script>

尝试一下 ?


HTML DOM 教程

在我们的 JavaScript 教程的 HTML DOM 部分,您已经学到了:

  • 如何改变 HTML 元素的内容 (innerHTML)
  • 如何改变 HTML 元素的样式 (CSS)
  • 如何对 HTML DOM 事件作出反应
  • 如何添加或删除 HTML 元素

如果您希望学到更多有关使用 JavaScript 访问 HTML DOM 的知识,请访问我们完整的 HTML DOM 教程

  JavaScript教程 最新文章
JavaScript 总结
JavaScript HTML DOM 实例
JavaScript 浏览器对象实例
JavaScript 对象实例
JavaScript 实例
JavaScript 测试 Prototype
JavaScript 对象实例
JavaScript 保留关键字
JavaScript Array(数组)对象
JavaScript If…Else 语句
上一篇文章      下一篇文章      查看所有文章
加:2021-07-04 10:46:59  更:2021-07-04 10:49:26 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年12日历 -2024/12/25 2:55:21-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码
数据统计