您的位置：首页 > 移动开发

HTML DOM appendChild() 、insertBefore(node, child)、removeChild(child)、replaceChild(node, child)方法使用指南

2016-12-04 22:18 537 查看
HTML DOM appendChild() 的使用步骤归结为如下四个步骤：

注意:

1、首先创建一个节点；

2、然后创建一个文本节点；

3、然后将文本节点添加到LI节点上；

4、最后将节点添加到列表中。

示例一、核心代码如下：

var node=document.createElement("LI");
var textnode=document.createTextNode("Water");
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);


示例二、代码如下：

<!DOCTYPE html>
<html>
<body>

<div id="div1">
<p id="p1">Text1.</p>
<p id="p2">Text2.</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("This is a new text.");
para.appendChild(node);

var element=document.getElementById("div1");
element.appendChild(para);
</script>

</body>
</html>

示例二改进版（增加点击函数、strong标签的用法）

<!DOCTYPE html>
<html>
<body>

<div id="div1">
<p id="p1">Text1.</p>
<p id="p2">Text2.</p>
</div>

<button onclick="myFunction()"> <strong>Click Me </strong></button>

<script>
function myFunction(){
var para=document.createElement("p");
var node=document.createTextNode("This is a new text.");
para.appendChild(node);

var element=document.getElementById("div1");
element.appendChild(para);
}
</script>

</body>
</html>


示例三：将创建的新元素插入到某个元素节点之前之insertBefore（node,child）方法的使用

Node insertBefore(Node node, Node? child);

说明：1、第一个参数是要操作的元素，第二个参数是插入到哪个节点之前（即哪个节点作为当前要插入节点的孩子）


<!DOCTYPE html>
<html>
<body>

<div id="div1">
<p id="p1">YunOS is Great!</p>
<p id="p2">IoT is Great!</p>
</div>

<button onclick="myFunction()"> <strong>Click Me </strong></button>

<script>

function myFunction(){
var para=document.createElement("p");
var node=document.createTextNode("We will Win!");
para.appendChild(node);

var element=document.getElementById("div1");
var child=document.getElementById("p1");
element.insertBefore(para,child);
}

</script>

</body>
</html>


示例四：删除已有的html元素之removeChild(child)方法的使用

<!DOCTYPE html>
<html>
<body>

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>

</body>
</html>


注意：不能在不引用父元素的情况下删除某个元素，DOM 需要了解您需要删除的元素，以及它的父元素。

这里提供一个常用的解决方法：找到您需要删除的子元素，然后使用 parentNode 属性来查找其父元素：

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


示例五：修改某个节点，使用replaceChild(node, child)方法

<!DOCTYPE html>
<html>
<body>

<div id="div1">
<p id="p1"> P1：YunOS is Great!</p>
<p id="p2"> P2：IoT is Great!</p>
<p id="p3">P3：Android is going to disappear!</p>
<p id="p4">P4：Android is going to be replace by YunOS!</p>

</div>

<button onclick="myFunction()"> <strong>Click Me </strong></button>

<script>

function myFunction(){
var para=document.createElement("p");
var node=document.createTextNode("P0：We will Win!");
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("p3");
parent.removeChild(child);

var parent=document.getElementById("div1");
var child=document.getElementById("p4");
var para=document.createElement("p");
var node=document.createTextNode("P4：Anroid is replaced by YunOS.");
para.appendChild(node);
parent.replaceChild(para,child);

}

</script>

</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  Dom html w3c
相关文章推荐
新的分享
章节导航