快捷導(dǎo)航

初學(xué)js 新節(jié)點的創(chuàng)建刪除的步驟

更新時間：2011年07月04日 23:26:57 作者：

對于js 我是個初學(xué)者甚至還不入門，我比較喜歡js做出的特效。

特羨慕寫出這些特效的高級程序員。我想學(xué)習(xí)，可總是不知道怎么去思考，不知道怎么去邏輯。有時候也很著急，這些都不怕，幸好還有人教我，指點我，這是我比較幸運的。但是我過不了自己這關(guān)了，自己最大的缺點就是逃避，不會做的就放棄了，不會了就不會了，也不敢問了。改，這個大缺點一定得改。以下，是洋哥指點我的學(xué)習(xí)技巧，思路清晰，效率也有很大的提高。。廢話就不扯了，言歸正傳：
題目：btton 按鈕一個添加一個刪除，點擊添加按鈕就會添加一個節(jié)點，點擊刪除按鈕就會刪除最后一個節(jié)點，添加的新元素點擊一下就會被刪除。
步驟一：分析思路做好準備工作（結(jié)構(gòu) 行為表現(xiàn) 分離既是 html結(jié)構(gòu) js腳本 css樣式分離）
首先:搭建html 結(jié)構(gòu)，定義下css樣式，寫基本的腳本（由于js腳本與html結(jié)構(gòu)是分離的所以）。

復(fù)制代碼代碼如下:

 
<div class="btns"> 
<input type="button" value="Add" id="addBtn"></input> 
<input type="button" value="Remove" id="removeBtn"></input> 
</div> 
<div class="box" id="boxcon"></div> 

js 分析：首先兩個button 的onclick 事件，其次，把添加和刪除都封裝成方法，以便調(diào)用函數(shù)，達到重用的目的。

復(fù)制代碼代碼如下:

 
window.onload = function() { 
addBtn.onclick = function() {} 
removeBtn.onclick = function() {} 
} 

步驟二：寫個創(chuàng)建的方法：創(chuàng)建新節(jié)點

復(fù)制代碼代碼如下:

 
function createEle() { 
var newEle = document.createElement("div");// 定義新的元素節(jié)點變量 
var newBtn = document.createElement("input");// 定義新的元素節(jié)點變量 
var boxEle = document.getElementById ("boxcon"); 
//找到所要添加到里面的那個元素 既是上一級元素，這里用id標識符來查找 
newEle.className="con";//賦予新建元素的屬性 樣式寫在css里 
newBtn.type ="button"; 
newBtn.value = " remove "; 
boxEle.appendChild(newEle);// 把新建的節(jié)點 添加到boxcon里 
} 

步驟三：寫刪除方法：刪除元素。

復(fù)制代碼代碼如下:

 
function removeEle(removeObj) { 
removeObj.parentNode.removeChild(removeObj); 
// 刪除元素 
} 

步驟四：調(diào)用函數(shù)

復(fù)制代碼代碼如下:

 
window.onload = function() { 
addBtn.onclick = function() { 
createEle(); 
} 
removeBtn.onclick = function() { 
var box = document.getElementById("boxcon"); 
removeEle(box.lastChild); 
} 
} 

呵呵總算完成的差不多了，別急還有一個功能。最后的一個功能。。（添加的新元素點擊一下就會被刪除）
over了。。。呵呵關(guān)于這個this的用法我還是不太懂。。。以后還需要仔細探究下。。。

您可能感興趣的文章: