目錄
三種動態創建元素的區別
- 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 高