动态创建元素的方式:
- document.write()或document.writeln();
- document.createElement();
- ele.innerHTML;
document.write(string);
/**
* 若是在页面加载完成后,执行document.write()方法,会覆盖页面内容。
* 很少使用到
*/
- innerHTML性能问题:
- 不推荐innerHTML在循环中使用,每一次循环,文档DOM树会重新绘制。
- 不推荐字符串大量拼接,字符串不可变,每一次字符串拼接会开辟新的内存空间,产生垃圾。
- 使用数组尽可能的解决innerHTML性能问题。
- 对于纯文本内容,推荐使用innerText。
<!-- innerHTML在循环中使用,造成严重性能问题 -->
<input type="button" value="按钮" id="btn">
<div id="box"></div>
<script>
var datas = ['西施', '貂蝉', '凤姐', '芙蓉姐姐'];
$id('btn').onclick = function() {
var box = $id('box');
box.innerHTML = '<ul>';//重新绘制DOM树,消耗时间
for (var i = 0, len = datas.length; i < len; i++) {
box.innerHTML += '<li>' + datas[i] + '</li>');//重新绘制DOM树,