<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type ="text/javascript">
window.onload = function () {
document.getElementById("btnAdd").onclick = function () {
var ulList = document.getElementById("ulList");
var linew = document.createElement("li");
//如果是双标签，那么标签的文本值就是innerHTML或是innerText
// linew.innerHTML = "四川";
linew.innerHTML = prompt("请输入一个值");
//将创建好的li标签添加到ul里面
ulList.appendChild(linew);
ulList.insertBefore(linew, ulList.childNodes[0]);
};
var ulli = gel("ulList");
var lis = ulli.childNodes;//获取所有的子元素
for (var i = 0; i < lis.length; i++) {
lis[i].onclick = function () {
// alert(this.innerHTML);//this 你当前点击的那个，this就是这个对象
if (confirm("确定要删除吗？"))
{
this.parentNode.removeChild(this);//删除当前节点
}
}
}
}
function gel(id) { return document.getElementById(id); }
</script>
</head>
<body>
<input type ="button" id="btnAdd" value ="新增" />
<ul id="ulList">
<li >北京</li>
<li >上海</li>
<li >广州</li>
</ul>
</body>
</html>
document_createElement,布布扣,bubuko.com
原文：http://www.cnblogs.com/sumg/p/3787776.html