快捷導(dǎo)航

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

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

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

特羨慕寫出這些特效的高級程序員。我想學(xué)習(xí)，可總是不知道怎么去思考，不知道怎么去邏輯。有時(shí)候也很著急，這些都不怕，幸好還有人教我，指點(diǎn)我，這是我比較幸運(yùn)的。但是我過不了自己這關(guān)了，自己最大的缺點(diǎn)就是逃避，不會做的就放棄了，不會了就不會了，也不敢問了。改，這個(gè)大缺點(diǎn)一定得改。以下，是洋哥指點(diǎn)我的學(xué)習(xí)技巧，思路清晰，效率也有很大的提高。。廢話就不扯了，言歸正傳：
題目：btton 按鈕一個(gè)添加一個(gè)刪除，點(diǎn)擊添加按鈕就會添加一個(gè)節(jié)點(diǎn)，點(diǎn)擊刪除按鈕就會刪除最后一個(gè)節(jié)點(diǎn)，添加的新元素點(diǎn)擊一下就會被刪除。
步驟一：分析思路做好準(zhǔn)備工作（結(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 分析：首先兩個(gè)button 的onclick 事件，其次，把添加和刪除都封裝成方法，以便調(diào)用函數(shù)，達(dá)到重用的目的。

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

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

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

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

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

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

您可能感興趣的文章: