document.wirte()
document.write('<div>345</div>');
直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘即加载一个新的html页面，且只包含写入的内容。
| <body> |
| <button>点击按钮</button> |
| <p>123</p> |
| <script> |
| var btn = document.querySelector('button'); |
| btn.onclick = function () { |
| document.write('<div>345</div>'); |
| } |
| </script> |
| </body> |
element.innerHTML
| <div class="inner"> |
| </div> |
| <script> |
| var inner = document.querySelector('.inner'); |
| inner.innerHTML = '<a href="#">百度</a>'; |
| </script> |
- innerHTML是将内容写入某个DOM节点，不会导致页面全部重绘。
- innerHTML创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂。
| |
| var array = [] |
| for (var i = 0; i < 1000; i++) { |
| array.push('<div style="width:100px;height:2px; border:1px solid blue;"></div> '); |
| } |
| document.body.innerHTML = array.join(''); |
document.creatElement()
| <div class="inner"> |
| </div> |
| <script> |
| var inner = document.querySelector('.inner'); |
| var a = document.createElement('a'); |
| inner.appendChild(a); |
| </script> |
createElement()创建多个元素效率稍低一点点，但是结构更清晰。
在不同的浏览器下，innerHTML如果采用数组拼接形式的话效率要比createElement高。