一、DOM的创建，插入，删除
createElement(标签名) appendChild(节点) insertBefore(节点，原有节点) removeChild(节点)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>创建，删除,插入元素</title>
<script>
window.onload = function(){
var oUl = document.getElementById('ul1');
var oUl2 = document.getElementById('ul2');
var oBtn = document.getElementById('btn1');
var oBtn2 = document.getElementById('btn2');
var oBtn3 = document.getElementById('btn3');
var oTxt = document.getElementById('txt1');
oBtn.onclick = function(){
var oLi = document.createElement('li');
oLi.innerHTML = oTxt.value;
oUl.appendChild(oLi);
};
//insertBefore 插入到...之前
oBtn2.onclick = function(){
var oLi = document.createElement('li');
oLi.innerHTML = oTxt.value;
if(oUl.children.length == 0){
oUl.appendChild(oLi);
}else{
oUl.insertBefore(oLi, oUl.children[0]);
}
};
oBtn3.onclick = function(){
oUl2.removeChild(oUl2.children[0]);
};
};
</script>
</head>
<body>
<input id="txt1" type="text" /><button id="btn1">创建元素</button><button id="btn2">插入到第一位</button><button id="btn3">删除元素</button>
<ul id="ul1">
</ul>
<hr />
<ul id="ul2">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>