本文實(shí)例講述了javascript創(chuàng)建元素和刪除元素。分享給大家供大家參考，具體如下：

創(chuàng)新互聯(lián)建站從2013年創(chuàng)立，先為渭濱等服務(wù)建站，渭濱等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為渭濱企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

1、創(chuàng)建元素

動(dòng)態(tài)創(chuàng)建新的DOM元素，是js操作網(wǎng)頁對象模型的重要手段之一。

運(yùn)行效果：

創(chuàng)建新元素通常有2種方法：

1、直接修改父元素的innerHTML元素；

2、使用createElement()來創(chuàng)建，再用appendChild()進(jìn)行DOM元素的掛接。

第一種方法用起來較為簡單，也易于理解，但需要修改整個(gè)父元素所包含的HTML內(nèi)容，若父元素原先就包含了一些HTML內(nèi)容，再進(jìn)行DOM掛接的話，執(zhí)行效率會(huì)較低；第二種方法相對較為靈活，效率也較高，只是用起來復(fù)雜一些。

2、刪除元素

刪除元素指的是把這個(gè)DOM元素徹底刪除，而不是隱藏。通常，使用removeChild()進(jìn)行刪除是最常見的方法。

  
  
  


  

    
  
  
  即將被刪除的DOM

解析：

由于removeChild()是對子元素的操作，而不是自身的刪除。所以，需要先獲取待刪除元素的父元素，然后再調(diào)用該函數(shù)。本例中，是先使用parentNode屬性獲得待刪除元素的父元素，再刪除目標(biāo)元素。

3、刪除所有的子元素

  
  
  


  

    
item1
    
item2
    
item3
    
item4
  
  

  

解析：刪除子元素，可通過js提供的removeChild()來實(shí)現(xiàn)。此外，需要意識(shí)到的另一點(diǎn)是，在遍歷刪除節(jié)點(diǎn)的過程中，每刪除一個(gè)子元素，子元素的個(gè)數(shù)就會(huì)少一個(gè)，因此，示例代碼始終刪除的是第一個(gè)子元素，直到?jīng)]有任何子元素為止。

注：

document.getElementsByTagName(“ul”) 返回的是一個(gè)數(shù)組，后面這個(gè)0是表示這個(gè)數(shù)組的第一個(gè)元素，而本網(wǎng)頁中ul標(biāo)簽就一個(gè)，因此指的就是這個(gè)ul標(biāo)簽了。

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運(yùn)行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《JavaScript操作DOM技巧總結(jié)》、《JavaScript頁面元素操作技巧總結(jié)》、《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。