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 οnclick="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 οnclick="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>
这里提供一个常用的解决方法:找到您需要删除的子元素,然后使用 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 οnclick="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>