javascript删除HTML结点操作

猿友 2021-01-04 14:36:29 浏览数 (3003)
反馈

HTML 页面上删除结点的操作跟添加结点中将段落添加在指定依附点之前相似,将段落添加在指定依附点之前代码为document.body.insertBefore(newGraf, docForm),删除的为 document.body.removeChild(deleteNode)就能够了。使用的是 removeChild 方法,删除的是 body 域里面的元素。

看个代码介绍一下吧。

假设有下面一段代码,内容有4段。

<html> 
<head> 
<title>Deleting Nodes</title> 
</head> 
<body> 
<p>给你一张过去的CD,听听那时我们的爱情,有时会突然忘了,我还在爱着你</p> 
<p>再唱不出那样的歌曲,听到都会红着脸躲避,虽然会常常忘了,我仍然爱着你</p> 
<p>由于爱情,不会轻易悲伤,所以一切都是幸福的样子</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 标签域内的第一个 p 标签内容。

document.body.removeChild(deleteNode);

 将获得到的要删除的节点信息从页面上面删除,使用 removeChild 方法。

如果段落有 id 的话,那就能够直接使用 getElementById 方法来指定的获得要删除的对象,不用再使用  getElementsByTagName 方法获得到对象集合,再通过数组下标来指定删除对象了。

 

我们的示例中删除的是 document.getElementsByTagName("p")[0],也能够删除其他段落,比如document.getElementsByTagName("p")[3] 等真实存在的段落信息。


0 人点赞