---

1、三种方式

1、document.write()
2、element.innerHTML
3、document.createElement()

2、区别

1、document.write()是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘；
2、innerHTML 是将内容写入某个 DOM 节点，不会导致页面全部重绘；
3、innerHTML 创建多个元素效率更高，（不要拼接字符串，采取数组形式拼接），结构稍微复杂；
4、createElement() 创建多个元素效率稍低一点点，但是结构更清晰。

3、总结

不同浏览器下，innerHTML 效率要比 createElement 高。

4、示例

<script>
	// 三种创建元素方式区别
	// 1. document.write() 创建元素  如果页面文档流加载完毕，再调用这句话会导致页面重绘
	var btn = document.querySelector("button");
	btn.onclick = function () {
		document.write("
123
");
	}
	// 2. innerHTML 创建元素
	var inner = document.querySelector(".inner");
	for (var i = 0; i <= 100; i++) {
		inner.innerHTML += '百度';
	}
	var arr = [];
	for (var i = 0; i <= 100; i++) {
		arr.push('百度');
	}
	inner.innerHTML = arr.join("");
	// 3. document.createElement() 创建元素
	var create = document.querySelector(".create");
	for (var i = 0; i <= 100; i++) {
		var a = document.createElement("a");
		create.appendChild(a);
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

5、innerTHML和createElement效率对比

5.1、innerHTML字符串拼接方式（效率低）

<script>
	function fn() {
		var d1 = +new Date();
		var str = "";
		for (var i = 0; i < 1000; i++) {
			document.body.innerHTML += '
';
		}
		var d2 = +new Date();
		console.log(d2 - d1);
	}
	fn();
</script>
1
2
3
4
5
6
7
8
9
10
11
12

5.2、createElement方式（效率一般）

<script>
	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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

5.3、innerHTML数组方式（效率高）

<script>
	function fn() {
		var d1 = +new Date();
		var array = [];
		for (var i = 0; i < 1000; i++) {
			array.push('
');
		}
		document.body.innerHTML = array.join("");
		var d2 = +new Date();
		console.log(d2 - d1);
	}
	fn();
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13

---

后记

如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！