appendChild()方法是向節點添加最后一個子節點。也可以使用此方法從一個元素向另一個元素移動元素。
案例一：向節點添加最后一個子節點
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul id="mylist">
<li>牛奶</li>
<li>橡膠</li>
<li>花生</li>
</ul>
<input type="text" id="listname" name="listname"/>
<input type="button" value="添加列表項" onclick="mylist();"/>
<script type="text/javascript">
function mylist(){
var node=document.createElement("li"); //創建一個li節點
var testnode=document.getElementById("listname").value;//拿到input輸入框的值
var asd=document.createTextNode(testnode)//定義創建文本節點
node.appendChild(asd); //把文本節點追加到li節點
document.getElementById("mylist").appendChild(node);//把li節點添加到ul中
}
</script>
</body>
</html>
案例二：從一個元素向另一個元素移動
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul id="mylist1">
<li>牛奶</li>
<li>橡膠</li>
<li>花生</li>
</ul>
<ul id="mylist2">
<li>蘋果</li>
<li>梨子</li>
<li>草莓</li>
</ul>
<input type="button" value="點擊移動" onclick="mylist();"/>
<script type="text/javascript">
function mylist(){
//定義節點 並把mylist2中的第一子節點賦值給node
var node=document.getElementById("mylist2").firstChild;
//將node里面獲取的子節點 添加到mylisf1里面
document.getElementById("mylist1").appendChild(node);
}
</script>
</body>
</html>