- document.write()
- element.innerHTML
- document.creatElement()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>button</button>
<p>123</p>
<div class="inner"></div>
<div class="create"></div>
<script>
// 三种创建元素的方式
// 1.document.write() 直接将内容写入页面的内容流，文档流执行完毕，则会导致页面全部重绘 很少用
// var btn = document.querySelector('button');
// btn.onclick = function() {
// document.write('<div>123</div>');
// };
// 2.innerHTML 是将内容写入某个DOM节点，不会导致页面重绘
// innerHTML 创建多个元素效率更高(不要拼接字符串，采取数组形式拼接)
var inner = document.querySelector('.inner');
// 字符串拼接方式 需要在内存不断的开辟新的空间 耗费性能 内存
// for (var i = 0; i <= 100; i++) {
// inner.innerHTML += '<a href="#">百度</a>';
// }
// 数组形式 效率高
var arr = [];
for (var i = 0; i <= 100; i++) {
arr.push('<a href="#">百度</a>');
}
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>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
