011-创建或复制节点

最新推荐文章于 2023-01-20 21:44:25 发布

编码的三叔

最新推荐文章于 2023-01-20 21:44:25 发布

阅读量288

点赞数

分类专栏： DOM详解 DOM详解文章标签： HTML创建或复制节点

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

版权

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

16 篇文章 0 订阅

订阅专栏

DOM详解

16 篇文章 0 订阅

订阅专栏

JavaScript脚本可以为DOM动态增加节点，程序为DOM树增加节点时，页面会动态地增加HTML元素。当需要为页面增加HTML元素时，应按如下两个步骤操作。

创建或复制节点
添加节点

创建或复制节点

创建节点通常借助于document对象的CreateElement方法来实现，语法如下。

document.createElement(Tag):创建Tag标签对应的节点。

下面代码演示了如何创建一个节点。

	<!DOCTYPE html>
	<html>
		<head>
			<meta http-equiv="content-type" content="text/html"/>
			<title>创建节点</title>
			
		</head>
		<body>
			<script type="text/javascript">
				var a=document.createElement("div");
				alert(a);
			</script>
		</body>
	</html>

在这里插入图片描述

在浏览器中浏览该页面，会弹出如上图演示效果。

当调用document.createElement('div')创建节点之后，将自动生成一个HTMLDivElement对象，该对象对应于HTML文档中的<div……>元素。因此，在创建元素时，传入的参数字符串并不是随意填写的，必须是一个合法的标签名，再看如下代码：

	<!DOCTYPE html>
	<html>
		<head>
			<meta http-equiv="content-type" content="text/html"/>
			<title>创建节点</title>
			
		</head>
		<body>
			<script type="text/javascript">
				var a=document.createElement("divXXX");
				alert(a);
			</script>
		</body>
	</html>

在这里插入图片描述
出现[object HTMLUnknownElement]未知元素。

注意：调用document.createElemenet()方法时，传入的参数必须是一个合法的HTML标签。

创建一个节点的开销可能过大，实际上还可以复制一个已有的节点，复制已有节点的系统开销略小。通过Node的cloneNode()方法即可复制一个已有节点，该方法的语法格式如下。

Node cloneNode(boolean deep) 复制当前节点。当deep为true时，表示在复制当前节点的同时，复制该节点的全部后代节点；当deep为false的时候，表示仅仅复制当前节点。

如下代码示范了如何复制节点：

	<!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);
			</script>
		</body>
	</html>

在这里插入图片描述

编码的三叔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
011-创建或复制节点

JavaScript脚本可以为DOM动态增加节点，程序为DOM树增加节点时，页面会动态地增加HTML元素。当需要为页面增加HTML元素时，应按如下两个步骤操作。创建或复制节点添加节点创建或复制节点创建节点通常借助于document对象的CreateElement方法来实现，语法如下。document.createElement(Tag):创建Tag标签对应的节点。下面代码演示...
复制链接

扫一扫