方式一:
使用 document.write()
语法格式:
document.write('新设置的内容<p>标签也可以生成</p>');
注意:在使用方式的时候,write() 输出内容,会把之前的整个页面覆盖掉
方式二:
使用 innerHTML
语法格式:
var box = document.getElementById('box'); box.innerHTML = '新内容<p>新标签</p>';
注意:这种方式创建大量的标签会存在效率问题
方式三:
使用 document.createElement() 创建元素节点
语法格式:
var div = document.createElement('div'); //在内存中创建一个元素节点var textNode = document.createTextNode('Hello World'); //在内存中创建一个文本节点div.appendChild(textNode); //将文本节点追加到 元素节点内 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