JavaScript 之 创建元素

南笙酒味 提交于 2020-03-25 19:49:55

方式一:

   使用  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>

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!