js 元素建立操作
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
<style>
</style>
<script>
window.onload = function(){
var oText = document.getElementById('text1');
var oBtn = document.getElementById('btn');
var oUl = document.getElementById('ul1');
oBtn.onclick = function(){
var oLi = document.createElement('li');
oLi.innerHTML = oText.value;
var oA = document.createElement('a');
oA.innerHTML = '刪除';
oA.href='javascript:;';
oA.onclick = function(){
//父級.removeChild(要刪除的元素);刪除元素
oUl.removeChild(this.parentNode);
}
oLi.appendChild(oA);
if(oUl.children[0]){
oUl.insertBefore(oLi,oUl.children[0]);
}else{
oUl.appendChild(oLi);
}
}
}
</script>
</head>
<body>
<input type="text" id="text1" />
<input type="button" value="留言" id="btn" />
<ul id="ul1"></ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
<style>
</style>
<script>
window.onload = function(){
var oDiv = document.getElementById('div1');
var oBtn = document.getElementById('btn');
var oP = document.getElementById('p1');
oBtn.onclick = function(){
//父級.replaceChild(新節點，被替換節點)替換子節點
document.body.replaceChild(oDiv,oP);
}
}
</script>
</head>
<body>
<div id="div1">div1</div>
<input type="button" value="按鈕" id="btn" />
<hr />
<p id="p1">pppppp</p>
</body>
</html>
appendChild,insertBefore,replaceChild都可操作動態創建出來的節點，也可以操作已有節點。