JavaScript 之 创建元素

方式一：

　　　使用  document.write()

　　　语法格式：

document.write('新设置的内容<p>标签也可以生成</p>');

　　　　注意：在使用方式的时候，write() 输出内容，会把之前的整个页面覆盖掉

方式二：

　　　使用 innerHTML 

　　　语法格式：

var box = document.getElementById('box');
box.innerHTML = '新内容<p>新标签</p>';

　　　　注意：这种方式创建大量的标签会存在效率问题

方式三：

　　　使用 document.createElement()

　　　语法格式：

var div = document.createElement('div');
document.body.appendChild(div);

　　　　这种方式，是先在内存中创建一个 DOM 对象，然后把这个对象添加到 DOM 树上。

性能问题　

　　　innerHTML  方法由于会对字符串进行解析，需要避免在循环内多次使用。所以并不推荐使用。

　　　innerHTML 的优化：可以先将字符串拼接好，或者直接放入 数组中，再转成字符串，再使用 innerHTML。

　　　

注意：

　　当使用 innerHTML 把一个元素内部清空的时候，如果元素内部有绑定的事件，这些事件并不回自动删除，从而发生了内存泄漏问题。

　　而 使用 removeChild 移除某个元素的时候，会把与之相应的事件也清除掉的。

　　Demo：

 

 1 <div id='box'>
 2     <input type="button" value="点击" id='btn'>
 3 </div>
 4 
 5 <script type="text/javascript">
 6     var box = document.getElementById('box');
 7     var btn = document.getElementById('btn');
 8 
 9     btn.onclick = function() {
10         alert('Hello javascript');
11     }
12 
13     // box.removeChild(btn);     不会发生内存泄漏，绑定事件随之消除
14     box.innerHTML = "";          // 发生内存泄漏，事件不消除，仍然存在
15 </script>

 

转载于:https://www.cnblogs.com/niujifei/p/11433169.html