Creating elements of DOM series

---

1、 Three ways

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

2、 difference

1、document.write() It's a content stream that writes content directly to the page , But the document flow is finished , It causes the page to be redrawn completely ;
2、innerHTML It's writing content into something DOM node , It doesn't cause the page to redraw completely ;
3、innerHTML It's more efficient to create multiple elements ,（ Don't splice strings , Take the form of array splicing ）, The structure is a little more complicated ;
4、createElement() Creating multiple elements is a little less efficient , But the structure is clearer .

3、 summary

Different browsers ,innerHTML More efficient than createElement high .

4、 Example

<script>
	//  Differences between the three methods of creating elements 
	// 1. document.write()  Create elements   If the page document stream is loaded , Calling this sentence again will cause the page to redraw 
	var btn = document.querySelector("button");
	btn.onclick = function () {
    
		document.write("<div>123</div>");
	}
	// 2. innerHTML  Create elements 
	var inner = document.querySelector(".inner");
	for (var i = 0; i <= 100; i++) {
    
		inner.innerHTML += '<a href="#"> Baidu </a>';
	}
	var arr = [];
	for (var i = 0; i <= 100; i++) {
    
		arr.push('<a href="#"> Baidu </a>');
	}
	inner.innerHTML = arr.join("");
	// 3. document.createElement()  Create elements 
	var create = document.querySelector(".create");
	for (var i = 0; i <= 100; i++) {
    
		var a = document.createElement("a");
		create.appendChild(a);
	}
</script>

5、innerTHML and createElement Efficiency comparison

5.1、innerHTML String splicing （ Low efficiency ）

<script>
	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>

5.2、createElement The way （ The efficiency of general ）

<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>

5.3、innerHTML Array mode （ Efficient ）

<script>
	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>

---

Postscript

If you feel the article is not good //(ㄒoㄒ)//, Just leave a message in the comments , The author continues to improve ;o_O???
If you think the article is a little useful , You can praise the author ;\\*^o^*//
If you want to progress with the author , Sure Wechat scan QR code , Focus on the front-end old L;~~~///(^v^)\\\~~~
Thank you readers (^_^)∠※！！！