三种动态创建元素总结

最新推荐文章于 2022-11-29 17:32:16 发布

hcoke

最新推荐文章于 2022-11-29 17:32:16 发布

阅读量191

点赞数

分类专栏：学习笔记文章标签： javascript

本文链接：https://blog.csdn.net/m0_62962469/article/details/123507981

版权

学习笔记专栏收录该内容

63 篇文章 0 订阅

订阅专栏

1.document.write 这种较少使用

这种方法是直接将内容写入页面的内容流，但是文档流执行完毕，则他会导致页面全部重绘。

比如：

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

点击按钮前后的变化：而且代码部分也会变化

window.onload = function() {
				document.write('<div>123</div>');
			}

将上边的事件函数部分换位如上的代码之后，也会有影响。如上代码是指在页面加载完成之后，再去执行js代码。

结果直接就是：

2.innerHTML创建元素将内容写入某个DOM节点，不会导致页面全部重绘创建多个元素效率更高但是不要用拼接字符串的方法要用数组形式拼接结构复杂

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="create">
			
		</div>
		<div class="inner">
			
		</div>
		<script type="text/javascript">
			//2.innerHTML创建元素
			var inner = document.querySelector('.inner');
			var arr = [];
			for(var i = 0; i <= 100; i++) {
				arr.push('<a href="#">哔哩哔哩</a>');
			}
			inner.innerHTML = arr.join('');
			//inner.innerHTML = '<a href="#">哔哩哔哩</a>';
			
		</script>
	</body>
</html>

3.document.creatElement() 创建元素创建多个元素效率稍微低一点但是结构更清晰

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="create">
			
		</div>
		<div class="inner">
			
		</div>
		<script type="text/javascript">
		
			//3.document.creatElement() 创建元素
			var create = document.querySelector('.create');
			for(var i = 0; i <= 100; i++) {
				var a = document.createElement('a');
				create.appendChild(a);
			}
		</script>
	</body>
</html>

hcoke

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
三种动态创建元素总结

1.document.write 这种较少使用这种方法是直接将内容写入页面的内容流，但是文档流执行完毕，则他会导致页面全部重绘。比如：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <button type="button">点击</butt..
复制链接

扫一扫