您当前位置：首页 > web前端 > htmlcss > javascript删除html结点操作

javascript删除html结点操作

来源：程序员人生发布时间：2015-03-28 08:54:05 阅读次数：2736次

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] 等真实存在的段落信息。

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生