appendChild()方法是向节点添加最后一个子节点。也可以使用此方法从一个元素向另一个元素移动元素。可以用在列表的添加操作中。
我主要以ul li列表举例:
这片代码是用于向列表中添加项的操作,主要的步骤是:
1,用var node = createElement("li")创建相应节点
2,获得要输入的信息内容text
3,利用var add = node.createTextNode(text)来填充节点的内容
4,利用ul.appendChild(node)来添加到相应的列表中,其中ul利用id跟document的getElementById()方法来赋值
<!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="添加列表项" οnclick="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>