本文共 780 字，大约阅读时间需要 2 分钟。

三种创建元素的方式：

1. document.write()
2. element.innerHTML
3. document.createElement()

1. document.write()

实现代码：

    
       
           btn    
段落
    
   
    inner
   
    
   
    create
   
    

初始页面：

实现效果：

2. element.innerHTML

(1) 字符串拼接方式：

实现代码：

    
       
           btn    
段落
    
   
    inner
   
    
   
    create
   
    

实现效果：

(2) 添加数组元素方式：

实现代码：

    
       
           btn    
段落
    
   
    inner
   
    
   
    create
   
    

实现效果：

3. document.createElement()

实现代码：

    
       
           btn    
段落
    
   
    inner
   
    
   
    create
   
    

实现效果：

总结：

1. document.write是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘。
2. innerHTML是将内容写入某个DOM节点，不会导致页面全部重绘。创建多个元素，结构稍微复杂。可以用字符串拼接方式、数组方式添加。
3. createElement()创建多个元素，结构更清晰。

转载地址：http://wfsu.baihongyu.com/