012-添加节点

最新推荐文章于 2023-02-02 16:15:46 发布

编码的三叔

最新推荐文章于 2023-02-02 16:15:46 发布

阅读量163

点赞数

分类专栏： DOM详解 DOM详解文章标签： DOM添加子元素

本文链接：https://blog.csdn.net/ppwwp/article/details/88418480

版权

DOM详解同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

DOM详解

16 篇文章 0 订阅

订阅专栏

当一个节点被创建成功之后，一定要将该节点添加到DOM树种太能显示出来。对于普通的节点，可采用Node对象的如下方法来添加节点。

appendChild(Node newNode):将newNode添加成大年及诶按的最后一个节点。
insertBefore(Node newNode,Node refNode):在refNode节点之前插入newNode节点。
replaceChild(Node newChild,Node oldChild):将oldChild节点替换成newChild节点。
在前面已经看到了appendChild()方法的用法，下面仅对该代码进行简单修改，将原有的appendChild()修改成insertBefore(),修改之后的关键代码如下。

	<!DOCTYPE html>
	<html>
		<head>
			<meta http-equiv="content-type" content="text/html"/>
			<title>创建节点</title>
			
		</head>
		<body>
			<ul id="d">
				<li>这是一首简单的小情歌</li>
			</ul>
			<script type="text/javascript">
				var ul = document.getElementById("d");
				var ss = ul.firstChild.nextSibling.cloneNode(false);
				ss.innerHTML = "被复制的节点";
				// ul.appendChild(ss);
				ul.insertBefore(ss,ul.firstChild);
			</script>
		</body>
	</html>

在这里插入图片描述

select 有更简单的添加方法

a. 利用append()方法向下拉框中添加元素
b. 利用remove()方法移除下拉框中最后一个元素

table tr标签也有其他的添加方法

编码的三叔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
012-添加节点

当一个节点被创建成功之后，一定要将该节点添加到DOM树种太能显示出来。对于普通的节点，可采用Node对象的如下方法来添加节点。appendChild(Node newNode):将newNode添加成大年及诶按的最后一个节点。insertBefore(Node newNode,Node refNode):在refNode节点之前插入newNode节点。replaceChild(Node n...
复制链接

扫一扫

专栏目录