document.write()
document.write('新设置的内容<p>标签也可以生成</p>');
innerHTML
var box = document.getElementById('box');
box.innerHTML = '新内容<p>新标签</p>';
document.createElement()
var div = document.createElement('div');
document.body.appendChild(div);
性能问题
-
innerHTML方法由于会对字符串进行解析,需要避免在循环内多次使用。
-
可以借助字符串或数组的方式进行替换,再设置给innerHTML
-
优化后与document.createElement性能相近
案例
-
动态创建列表,高亮显示
-
根据数据动态创建表格