目录
3.3 document.createElement() 创建元素
1、JavaScript中创建动态元素的三种方法:
- document.write()
- element.innerHTML
- document.createElement()
document.write('');
element.innerHTML='';
document.createElement('');
2、三种方法的区别:
- document.write 是直接将内容写入页面的内容流,但是文档流执行完毕,则它会导致页面全部重绘
- innerHTML 是将内容写入某个 DOM 节点,不会导致页面全部重绘
- innerHTML 创建多个元素效率更高(不要拼接字符串,采取数组形式拼接),结构稍微复杂
- createElement() 创建多个元素效率稍低一点点,但是结构更清晰
3、三种方式使用举例:
3.1 document.write()
document.write('<div>123</div>')
3.2 element.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.3 document.createElement() 创建元素
var create = document.querySelector('.create');
for (var i = 0; i <= 100; i++) {
var a = document.createElement('a');
create.appendChild(a);
}
4、三种方法比较
4.1 关于重绘页面
1、document.write全部重绘
使用document.write是直接将内容写入页面的内容流,但是文档流执行完毕,它会导致页面全部重绘制
window.onload = function () {
document.querySelector('.btn00000').onclick = function () {
document.write("<h1>ssss</h1>")
}
}
点击class为btn00000的按钮,文档内容会重新绘制,最后只剩下 document.write的内容
2、element.innerHTML方法不重绘
var innner=document.querySelector('.inner')
console.log(innner)
innner.innerHTML='<a href="#">百度</a>'
document.createElement创建元素不会立即添加到文档,需要先获取添加的父元素,然后通过appendChild或insertBefore等方法插入
//添加节点
var li21 = document.createElement('li')
li21.innerHTML = 'li21'
ul2.appendChild(li21)
var li20 = document.createElement('li')
li20.innerHTML = 'li20'
ul2.insertBefore(li20, li21)
4.2 关于创建效率
- innerhHTML 和 creatElement()主要体现在效率方面。
- 利用 innerhHTML 和 creatElement() 都可以创建新的元素。
- innerHTML利用数组创建多个元素(再拼接为字符串)效率最高。
- creatElement()创建多个元素效率其次,但是结构比较简单清晰。
1、innerHTML利用字符串直接创建元素
innerHTML利用字符串直接创建多个元素效率,创建1000个a标签用了 850毫秒左右(自测值)
<script>
function timer() {
var date1 = +new Date();
for (var i = 0; i < 1000; i++) {
document.body.innerHTML += '<a href="#">链接</a>';
}
var date2 = +new Date();
var timed = date2 - date1;
console.log(timed);
}
timer()
</script>
2、innerHTML利用数组创建多个元素
innerHTML利用数组创建多个元素效率,创建1000个a标签用了 10毫秒以内(自测值)
<script>
function timer() {
var date1 = +new Date();
var arr = [];
for (var i = 0; i < 1000; i++) {
arr.push('<a href="#">链接</a>');
}
document.body.innerHTML = arr.join('')
var date2 = +new Date();
var timed = date2 - date1;
console.log(timed);
}
timer()
</script>
3、creatElement()创建多个元素效率
creatElement()创建多个元素效率,创建1000个div标签用了 10毫秒以内(自测值),略大于利用innerHTML创建。
<script>
function timer() {
var date1 = +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 date2 = +new Date();
var timed = date2 - date1;
console.log(timed);
}
timer()
</script>