【DOM基础】3种动态创建元素的方法及其区别

1. 3种动态创建元素的方法

1. document.write()
   

2. document.innerHTML
   

3. document.createElement()
   

2. 区别

1. document.write() 是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘；
   

• 点击发送之前
  
• 点击发送之后
  

2. innerHTML 将内容写入某个DOM节点，不会导致页面全部重绘；
3. innerHTML 创建多个元素效率更高，但是不要拼接字符串，采取数组形式拼接，结构稍微复杂；
4. createElement() 创建多个元素效率稍微低一点，但结构更清晰。
5. 总结： 不同浏览器下，innerHTML效率比createElement()高。

3. innerHTML的两种使用

3.1 拼接字符串

3.2 数组形式拼接

4. createElement（）的使用

      var inner = document.querySelector(".inner");
      var a = document.createElement('a');
      inner.appendChild(a);