（节点操作）三种动态创建元素的区别

最新推荐文章于 2024-07-14 17:09:06 发布

Jmd010814

最新推荐文章于 2024-07-14 17:09:06 发布

阅读量114

点赞数

文章标签： html javascript html5

本文链接：https://blog.csdn.net/m0_56839193/article/details/120809233

版权

document.write();

element.innerHTML;

document.createElement;

1.document.write() 创建元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button type="button">点击</button>
		<p>abc</p>
	</body>
	<script type="text/javascript">
		// 三种创建元素方式的区别
		// 1.document.write() 创建元素
		var btn=document.querySelector('button');
		btn.onclick=()=>{
			document.write('<div>123</div>');
		}		
	</script>
</html>

刷新页面再次点击点击按钮会出现一个新的页面（页面重绘）

之前的那些<DOCTYPE HTML><META><TITLE>都被删除了重绘了一个新的页面;

区别：document.write() 是直接将内容写入页面的内容流，但是文档流执行完毕，则会导致页面全部重绘。

解决方法：用这个页面加载window.οnlοad=function(){document.write(....)};

2.innerHTML和createElement区别

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>innerHTML拼接效率</title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		function fn(){
			var d1=+new Date();
			var str="";
			for(var i=0;i<1000;i++){
				document.body.innerHTML +='<div style="width: 100px;height: 2px;border: 1px solid blue;"></div>'
			}
			var d2=+new Date();
			console.log(d2-d1);
		}
		fn();
	</script>
</html>



<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>createElement拼接效率</title>
	</head>
	<body>
		<div></div>
	</body>
	<script type="text/javascript">
		function fn(){
			var d1=+new Date();
			for(var i=0;i<1000;i++){
				var div=document.createElement('div');
				div.style.width='100px';
				div.style.height='2px';
				div.style.border='1px solid red';
				document.body.appendChild(div);
			}
			var d2=+new Date();
			console.log(d2-d1);
		}
		fn();
	</script>
</html>

两个的加载时间inner比createElement慢很多

要速率快可以尝试一下数组加载：如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>innerHTML数组拼接效率</title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		function fn(){
			var d1=+new Date();
			var array=[];
			for(var i=0;i<1000;i++){
				array.push('<div style="width: 100px;height: 2px;border: 1px solid blue;"></div>')
			}
			document.body.innerHTML=array.join('');
			var d2=+new Date();
			console.log(d2-d1);
		}
		fn();
	</script>
</html>


var inner=document.querySelector('.inner');
		// for(var i=0;i<=100;i++)
		// {
		// 	inner.innerHTML +='<a href="#">百度</a>'
		// }
		var arr=[];
		for(var i=0;i<=100;i++)
		{
			arr.push('<a href="#">百度</a>')
		}
		inner.innerHTML=arr.join('');
		// 3.document.createElement() 创建元素
		var create=document.querySelector('.create');
		var a=document.createElement('a');
		create.appendChild(a);

区别：

innerHTML是将内容写入某个DOM节点，不会导致页面全部重绘

innerHTML创建多个元素效率更高（不要拼接字符串。采取数组形式拼接）结构稍微复杂

createElement() 创建多个元素效率稍微低一些些，但是结构更清晰

总结：如果用innerHTML不采取字符串拼接而采取数组的形式，innerHTML效率更高而createEl

ement更低一些，总之，在不同的浏览器下，innerHTML采取数组效率要比createElement高

Jmd010814

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
（节点操作）三种动态创建元素的区别

document.write();element.innerHTML;document.createElement;1.document.write() 创建元素<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <button type="button"&
复制链接

扫一扫