創建、插入和刪除元素
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文件</title>
<script>
window.onload=function()
{
/*
備註:
創建 DOM 元素
- CreateElement(tag name); //創建一個元素
- appendChild (Node) ; //將結點放在誰裡面
插入元素
- insertBefore (Node,原有的節點)在已有的元素前插入
Ex: 倒序插入
刪除原宿
- removeChild( Node ); //刪除一個Node
Ex:刪除li
*/
/*創建 DOM 元素
var oBtn=document.getElementById('btn1');
var oUl=document.getElementById('ul1');
var oTxt=document.getElementById('txt1');
oBtn.onclick=function()
{
//Step1.Create
var oLi=document.createElement('li');
//Step2.將創建好的東西做為子結點，放到別人下面去
oUl.appendChild(oLi);
//Test Code , 將文字框的數字放到li裡面去
oLi.innerHTML=oTxt.value;
}
*/
/*插入元素 : 將新創的元素放在第一個*/
var oBtn=document.getElementById('btn1');
var oUl=document.getElementById('ul1');
var oTxt=document.getElementById('txt1');
oBtn.onclick=function()
{
var oLi=document.createElement('li');
var aLi=document.getElementsByTagName('li');
oLi.innerHTML=oTxt.value;
if (aLi.length > 0 )
{
oUl.insertBefore(oLi,aLi[0]);
}
else
{
oUl.appendChild(oLi);
}
}
}
</script>
</head>
<body>
<input id="txt1" type="text"/>
<input id="btn1" type="button" value="創建li"/>
<ul id="ul1">
</ul>
</body>
</html>
刪除
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文件</title>
<script>
window.onload=function()
{
var aA=document.getElementsByTagName('a');
var oUl=document.getElementById('ul1');
for (var i = 0 ; i<aA.length;i++)
{
aA[i].onclick=function()
{
//要刪除，必須在它父親那邊去刪除
//從她老爸那邊刪除他，this就是點擊的delete
//也就是說找到delete的老爸(a)然後刪除他兒子(a)
oUl.removeChild(this.parentNode);
}
}
}
</script>
</head>
<body>
<ul id="ul1">
<li>1<a href="javascript:;">Delete</a></li>
<li>2<a href="javascript:;">Delete</a></li>
<li>3<a href="javascript:;">Delete</a></li>
<li>4<a href="javascript:;">Delete</a></li>
</ul>
</body>
</html>
留言列表
Linux (2)
{{ article.title }}