1. 3种动态创建元素的方法
-
document.write()
-
document.innerHTML
-
document.createElement()
2. 区别
- document.write() 是直接将内容写入页面的内容流,但是文档流执行完毕,则它会导致页面全部重绘;
- 点击发送之前
- 点击发送之后
- innerHTML 将内容写入某个DOM节点,不会导致页面全部重绘;
- innerHTML 创建多个元素效率更高,但是不要拼接字符串,采取数组形式拼接,结构稍微复杂;
- createElement() 创建多个元素效率稍微低一点,但结构更清晰。
- 总结: 不同浏览器下,innerHTML效率比createElement()高。
3. innerHTML的两种使用
3.1 拼接字符串
3.2 数组形式拼接
4. createElement()的使用
var inner = document.querySelector(".inner");
var a = document.createElement('a');
inner.appendChild(a);