document节点创建页面元素

最新推荐文章于 2024-05-28 00:30:00 发布

不甜呐

最新推荐文章于 2024-05-28 00:30:00 发布

阅读量3.3k

点赞数

分类专栏： JavaScript 文章标签：前端 javascript js

@不甜呐

本文链接：https://blog.csdn.net/weixin_55992854/article/details/117112802

版权

JavaScript 专栏收录该内容

24 篇文章 5 订阅

订阅专栏

1.createElement()方法

描述：本方法用来在内存中创建一个页面元素

语法：var 变量名 = document.createElement("标签名");

注意：本方法创建的页面元素并不会直接显示在页面中，而是默认存在于内存中

兼容性：五大主流浏览器都支持

2.createTextNode()方法

描述：本方法可创建文本节点

语法：var 变量名 = document.createTextNode(text);

兼容性：五大主流浏览器都支持

3.appendChild()方法

描述：给某个元素添加一个子节点

语法：fatherNode.appendChild(sonNode);

兼容性：五大主流浏览器都支持

4.createAttribute()

描述：本方法用来生成一个属性节点

语法：var attrNode = document.createAttribute("属性名");

注意：

(1)本方法创建的叫【属性节点】，不叫css属性节点！！！

(2)创建的属性节点采用【.value = ''】进行赋值

(3)创建的属性节点采用【元素节点.setAttributeNode(属性节点)】方法绑定到元素上

兼容性：五大主流浏览器都支持

5.createComment()方法

描述：本方法用于创建注释节点

语法：document.createComment(text);

注意：注释在页面上是看不见的

兼容性：五大主流浏览器都支持

6.createDocumentFragment()方法

描述：本方法方法创建了一虚拟的节点对象，节点对象包含所有属性和方法。

如果要提取文档的一部分，改变，增加，或删除某些内容及插入到文档末尾可以使用createDocumentFragment()方法。你也可以

使用文档的文档对象来执行这些变化，但要防止文件结构被破坏，createDocumentFragment()方法可以更安全改变文档的结构及

节点。

兼容性：五大主流浏览器都支持

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>document节点创建页面元素</title>
	</head>
	<body>
		<p>点击按钮创建p元素</p>
		<button type="button" onclick="myFunc()">点我</button><hr />
		
		<ul>
			<li>Coffee</li>
			<li>Tea</li>
		</ul>
		<p>点击按钮更改列表项，使用createDocumentFragment方法</p>
		<button type="button" onclick="myFunc1()">点我</button>
	</body>
	<script type="text/javascript">
		function myFunc(){
			//添加一个元素节点
			var p = document.createElement("p");
			
			//创建一个文本节点，并向p标签中添加这个文本节点(文本也是节点)
			var p_text = document.createTextNode("这是新增的p标签");
			p.appendChild(p_text);
			
			//创建一个属性节点，并添加到元素上
			var p_align = document.createAttribute("align");
			p_align.value = "center";
			p.setAttributeNode(p_align);
			
			var p_style = document.createAttribute("style");
			p_style.value = "color:red;font-size:20px;";
			p.setAttributeNode(p_style);
			
			//将元素节点添加到body之内
			document.body.appendChild(p);
			
			//创建一个注释节点并添加在body，但注释在页面上是看不见的
			var c = document.createComment("这是一个注释节点");
			document.body.appendChild(c);
		};
		
		function myFunc1(){
			var x = document.createDocumentFragment();
			x.appendChild(document.getElementsByTagName("li")[0]);
			x.childNodes[0].childNodes[0].nodeValue="Milk";
			document.getElementsByTagName("UL")[0].appendChild(x);
		};
	</script>
</html>

不甜呐

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
document节点创建页面元素

1.createElement()方法描述：本方法用来在内存中创建一个页面元素语法：var 变量名 = document.createElement("标签名"); 注意：本方法创建的页面元素并不会直接显示在页面中，而是默认存在于内存中兼容性：五大主流浏览器都支持2.createTextNode()方法描述：本方法可创建文本节点语法：var 变量名 = document.createTextNode(text);兼容性：五大主流浏览器都...
复制链接

扫一扫

专栏目录