JavaScript HTML DOM 元素 (节点)_JSHTMLDOM


JavaScript HTML DOM 元素 (节点)

添加和移除元素(节点)。


一、appendChild()-新建 HTML 元素 (节点)

先创建新的 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);

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

在上的示例代码中使用了 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>


演示一下 ?

四、移除已有 HTML 元素

要删除一个元素,你需要了解次元素的父元素。

示例代码

<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> 元素::

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

如能够在不引用父元素的情况下删除某个元素,就非常好了。
可是很遗憾。DOM 需要了解需要删除的元素及父元素。

这下面代码是一种常见的解决方法:然后找到其父元素,再用其 parentNode 属性找到父节点

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

六、replaceChild() - 替换 HTML 元素  

你可以通过 replaceChild() 方法来替换 元素。

示例代码

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


演示一下 ?


Copyright © 2017 CSS5.NET教程.CSS5 内容仅用于学习和测试参考。 css5.net All Rights Reserved 蜀ICP备15003849号-16