目录
三种动态创建元素的区别
- document.write()
- element.innerHTML
- document.createElement()
A. 三种方式如何创建
<body>
<button>bite</button>
<p>abc</p>
<div class="inner"></div>
<div class="create"></div>
<script>
// 1. document.write() 创建元素
var btn = document.querySelector('botton');
btn.onclick = function() {
document.write('<div>123</div>');
}
// 2. innerHTML 创建元素
var inner = document.querySelector('.inner');
inner.innerHTML = '<a href="#">百度</a>'
// 3. document.createElement() 创建元素
var create = document.querySelector('.create');
var a = document.createElement('a');
create.appendChild(a);
a.href = '#';
a.innerHTML = "搜狗";
</script>
</body>
B. 区别（4点区别）：
1. document.write 是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘（其他的结构没有了只剩document.write写入的）
栗子：
<body>
<button>bite</button>
<p>abc</p>
<script>
/* 1. */ window.onload = function() {/* 等页面加载完毕后，在写入 */
document.write('<div>123</div>');
}
/* 2. */ var btn = document.querySelector('botton');
btn.onclick = function() {
document.write('<div>123</div>');
}
</script>
</body>
2. innerHTML 是直接将内容写入某个 DOM 节点，不会导致页面全部重绘
3. innerHTML 创建多个元素的效率更高（不要使用拼接字符串，采取数组的形式拼接），结构稍微复杂
4. createElement 创建多个元素的效率稍微低一点点，但是结构更清晰
.
下面这三个测试来说明问题.（看运行时间）
- innerHTML拼接效率测试（慢）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>innerHTML拼接效率测试</title>
<style>
div {
width: 100px;
height: 2px;
border: 1px solid blueviolet;
}
</style>
</head>
<body>
<script>
function fn() {
var d1 = +new Date(); /* +:转化成数字 */
var str = '';
for (var i = 0; i < 5000; i++) {
document.body.innerHTML += "<div></div>"; /* 拼接字符串 */
}
var d2 = +new Date();
console.log(d2 - d1);/* 看运行时间 */
}
fn();
</script>
</body>
</html>
- createElement效率测试（较快）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>createElement效率测试</title>
<style>
div {
width: 100px;
height: 2px;
border: 1px solid red;
}
</style>
</head>
<body>
<script>
function fn() {
var d1 = +new Date(); /* +:转化成数字 */
var str = '';
for (var i = 0; i < 5000; i++) {
var div = document.createElement('div');
document.body.appendChild(div);
}
var d2 = +new Date();
console.log(d2 - d1);
}
fn();
</script>
</body>
</html>
- innerHTML数组效率测试（非常快）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>innerHTML数组效率测试</title>
<style>
div {
width: 100px;
height: 2px;
border: 1px solid blueviolet;
}
</style>
</head>
<body>
<script>
function fn() {
var d1 = +new Date(); /* +:转化成数字 */
var arr = [];
for (var i = 0; i < 10000; i++) {
arr.push("<div></div>");
}
document.body.innerHTML = arr.join('');
var d2 = +new Date();
console.log(d2 - d1);
}
fn();
</script>
</body>
</html>
总结：不同浏览器下，innerHTML 效率要比 createElement 高