JavaScript HTML DOM 元素 (节点)
JavaScript HTML DOM 元素 (节点)
实例解析
移除已存在的元素
本章节介绍如何向文档中添加和移除元素(节点)。
创建新的 HTML 元素 (节点) - appendChild()要创建新的 HTML 元素 (节点)需要先创建一个元素，然后在已存在的元素中添加它。
实例
这是一个段落。
这是另外一个段落。
var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
实例解析
以下代码是用于创建
元素:
var para = document.createElement("p");
为
元素创建一个新的文本节点：
var node = document.createTextNode("这是一个新的段落。");
将文本节点添加到
元素中：
para.appendChild(node);
最后，在一个已存在的元素中添加 p 元素。
查找已存在的元素：
var element = document.getElementById("div1");
添加到已存在的元素中:
element.appendChild(para);
创建新的 HTML 元素 (节点) - insertBefore()
以上的实例我们使用了 appendChild() 方法，它用于添加新元素到尾部。
如果我们需要将新元素添加到开始位置，可以使用 insertBefore() 方法:
实例
这是一个段落。
这是另外一个段落。
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);
移除已存在的元素
要移除一个元素，你需要知道该元素的父元素。
实例
这是一个段落。
这是另外一个段落。
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
注意：早期的 Internet Explorer 浏览器不支持 node.remove() 方法。
实例解析HTML 文档中
元素包含两个子节点 (两个
HTML DOM 教程
元素):
这是一个段落。
这是另外一个段落。
查找 id="div1" 的元素:
var parent = document.getElementById("div1");
查找 id="p1" 的
元素:
var child = document.getElementById("p1");
从父元素中移除子节点：
parent.removeChild(child);
 |
如果能够在不引用父元素的情况下删除某个元素，就太好了。 不过很遗憾。DOM 需要清楚您需要删除的元素，以及它的父元素。 |
|---|
以下代码是已知要查找的子元素，然后查找其父元素，再删除这个子元素（删除节点必须知道父节点）：
var child = document.getElementById("p1");
child.parentNode.removeChild(child);
替换 HTML 元素 - replaceChild()
我们可以使用 replaceChild() 方法来替换 HTML DOM 中的元素。
实例
这是一个段落。
这是另外一个段落。
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);
HTML DOM 教程
在我们的 JavaScript 教程的 HTML DOM 部分，您已经学到了：
如何改变 HTML 元素的内容 (innerHTML) 如何改变 HTML 元素的样式 (CSS) 如何对 HTML DOM 事件作出反应 如何添加或删除 HTML 元素如果您希望学到更多有关使用 JavaScript 访问 HTML DOM 的知识，请访问我们完整的 HTML DOM 教程。
相关文章
Efia
2020-11-23
Rose
2023-05-18
Antonia
2023-05-18
Thalia
2023-05-18
Kefira
2023-05-18
Jacinthe
2023-05-18
Viridis
2023-05-18
Tani
2023-07-10
Diane
2023-07-10
Kohana
2023-07-20
Hellens
2023-07-20
Rayna
2023-07-20
Angie
2023-07-20
Edie
2023-07-20
Radinka
2023-07-20
Zada
2023-07-20
Tesia
2023-07-20