更快的插入HTML元素

一般我们想要往页面中添加HTML元素，通常是这样做的

let ol = document.querySelector('ol');	//假设在页面中有一个ol元素
let li = document.createElement('li');
for(let i=0; i<10; i++){
	li.innerText = i;
	ol.appendChild(li);
}

上面的代码中，每次循环都会调用一次appendChild方法，而众所周知，DOM操作的效率是比较低的，所以我们需要尽量避免DOM操作。

为了避免DOM操作，我们可以使用元素的innerHTML属性，为这个属性设置值之后，浏览器就会根据字符串的内容生成相应的DOM树。在innerHTML的时候会创建一个HTML解析器，这个解析器是浏览器级别的代码，一般是用C++写的，所以运行效率会比JavaScript代码高。

那么上面的代码可以改写成

let ol = document.querySelector('ol');	//假设在页面中有一个ol元素
let li = document.createElement('li');
for(let i=0; i<10; i++){
	ol.innerHTML += '<li>' + i + '</li>';
}

但是这个代码也存在一些问题，第一个问题就是每次循环都需要访问innerHTML属性两次（访问一次，赋值一次），第二个问题在于创建和销毁HTML解析器都是需要一些时间的，因此最好是把设置innerHTML的次数尽量减少。

那最好的做法就是单独创建一个字符串，最后再把这个字符串赋值给innerHTML。那上面的代码可以改成

let ol = document.querySelector('ol');	//假设在页面中有一个ol元素
let li = document.createElement('li');
let domString = ''
for(let i=0; i<10; i++){
	domString += '<li>' + i + '</li>';
}
ol.innerHTML = domString;