您當前位置：首頁 > web前端 > htmlcss > javascript刪除html結點操作

javascript刪除html結點操作

來源：程序員人生發布時間：2015-03-28 08:54:05 閱讀次數：2910次

html頁面上刪除結點的操作跟添加結點中將段落添加在指定依附點之前相似，將段落添加在指定依附點之前代碼為document.body.insertBefore(newGraf, docForm),刪除的為document.body.removeChild(deleteNode)就能夠了。使用的是removeChild 方法，刪除的是body域里面的元素。

看個代碼介紹1下吧。

假設有下面1段代碼，內容有4段。

<html> <head> <title>Deleting Nodes</title> </head> <body> <p>給你1張過去的CD，聽聽那時我們的愛情，有時會突然忘了，我還在愛著你</p> <p>再唱不出那樣的歌曲，聽到都會紅著臉躲避，雖然會常常忘了，我仍然愛著你</p> <p>由于愛情，不會輕易悲傷，所以1切都是幸福的樣子</p> <p>由于愛情，簡單的生長，仍然隨時都能為你瘋狂</p> <input type="button" onclick="deleteNodes()" value="delete Nodes"/> <script> function deleteNodes() { } </script> </body> </html>

現在要刪除段落內容，該如何實現deleteNodes方法呢？

很簡單，兩行代碼弄定。

var deleteNode =document.getElementsByTagName("p")[0]; document.body.removeChild(deleteNode);

var deleteNode =document.getElementsByTagName("p")[0];

獲得到要刪除的段落內容，document.getElementsByTagName("p")[0]為body標簽域內的第1個p 標簽內容。

document.body.removeChild(deleteNode);

將獲得到的要刪除的節點信息從頁面上面刪除，使用removeChild方法。

如果段落有id的話，那就能夠直接使用getElementById 方法來指定的獲得要刪除的對象，不用再使用 getElementsByTagName 方法獲得到對象集合，再通過數組下標來指定刪除對象了。

我們的示例中刪除的是document.getElementsByTagName("p")[0]，也能夠刪除其他段落，比如document.getElementsByTagName("p")[3] 等真實存在的段落信息。

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
程序員人生