复习js创建动态创建元素的三种方式

最新推荐文章于 2022-10-17 14:16:34 发布

丰柏林

最新推荐文章于 2022-10-17 14:16:34 发布

阅读量263

点赞数

分类专栏： js前端文章标签： js如何动态的创建元素 write innerHTml

本文链接：https://blog.csdn.net/qq_40647912/article/details/90268986

版权

js前端专栏收录该内容

30 篇文章 0 订阅

订阅专栏

1.document.write()
document.write会把整个页面替换，不建议使用这种方式

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<h1>标题</h1>
	<img src="" alt="">

	<input type="button" id="btn" value="按钮">
	<script>

		//动态创建元素
		//document.write()
		var btn = document.getElementById("btn");
		btn.onclick = function(){
			//document.write会把整个页面替换，不建议使用这种方式
			document.write("hello <p>world</p>");
		}

		
	</script>
</body>
</html>

2.使用innerHTML
innerHTML会把所有的内容绘制到页面上
每绘制一次，浏览器中的dom树就会增加
下面的代码总共绘制了3次

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<input type="button" id="btn" value="按钮">
	<div id="box">
	</div>
	<script>
		var datas = ["小乔","貂蝉","芈月","妲己"];
		var btn = document.getElementById("btn");
		btn.onclick = function(){
			var box = document.getElementById('box');
			//第一次绘制
			box.innerHTML = "<ul>";
			//遍历数据
			for (var i = 0; i < datas.length; i++) {
				var data = datas[i];
				//第二次绘制
				box.innerHTML += "<li>" + data + "</li>";
			}
			//第三次绘制
			box.innerHTML += "</ul>";
		}
	</script>
</body>
</html>

优化后的代码
将代码存放在对象中，然后一次性绘制
放在数组中避免了重复开辟内存的问题

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<input type="button" id="btn" value="按钮">
	<div id="box">
	</div>
	<script>
		var datas = ["小乔","貂蝉","芈月","妲己"];
		var btn = document.getElementById("btn");
		btn.onclick = function(){
			var box = document.getElementById('box');
			var html = "<ul>";
			//遍历数据
			for (var i = 0; i < datas.length; i++) {
				var data = datas[i];
				 html += "<li>" + data + "</li>";
			}
			html += "</ul>";
			//只绘制一次
			box.innerHTML = html;
		}
	</script>
</body>
</html>