javascript删除html结点操作

最新推荐文章于 2024-08-02 13:42:59 发布

姜小白-

最新推荐文章于 2024-08-02 13:42:59 发布

阅读量9k

点赞数 2

分类专栏： javascript 文章标签： javascript removeChild 删除结点

本文链接：https://blog.csdn.net/magi1201/article/details/44085575

版权

javascript 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

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

看个代码介绍一下吧。

假如有下面一段代码，内容有四段。

<html>
	<head>
		<title>Deleting Nodes</title>
	</head>
	<body>
		<p>给你一张过去的CD，听听那时我们的爱情，有时会突然忘了，我还在爱着你</p>
		<p>再唱不出那样的歌曲，听到都会红着脸躲避，虽然会经常忘了，我依然爱着你</p>
		<p>因为爱情，不会轻易悲伤，所以一切都是幸福的模样</p>
		<p>因为爱情，简单的生长，依然随时都能为你疯狂</p>
		<input type="button" οnclick="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] 等真实存在的段落信息。

姜小白-

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
javascript删除html结点操作

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

扫一扫

专栏目录