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>