概述

js节点操作中有三种形式来动态创建元素，别离为：

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

采纳以上三种形式会有不同的优缺点，为了在不同的场景下更为失当的抉择办法来创立元素，接下来对这三种形式进行剖析总结。

1. document.write()

应用办法
document.write('<div>This is a Test</div>');
作用

在页面文档增加元素

应用弊病

当页面文档流加载实现之后，再调用该语句会造成页面重绘，场景如下：

<div>原来存在的页面元素</div><button>点击我减少新元素</button><script>    document.querySelector('button').onclick = function () {        document.write('<div>This is a Test</div>');    }</script>

呈现的页面成果为：

此时页面文档流曾经加载结束，再点击按钮，呈现以下状况：

查看页面元素：

从上能够发现，之前的页面文档元素被重写

总结

如果非必须的状况下，不倡议应用该办法创立元素，起因：

  1. 逻辑性不强
  2. 操作失误容易导致整个页面被重写

2. element.innerHTML

应用办法
<div></div><script>    document.querySelector('div').innerHTML = '<a href="#">新增加的</a>';</script>
作用

为某个元素内增加子元素

应用效率剖析
  1. 采纳字符串拼接的形式
    如果有以下利用场景，须要增加1000个元素
 <div></div><script>    var newDate = new Date();    for (var i = 0; i < 1000; i++) {        document.querySelector('div').innerHTML += '<a href="#">新增加的</a>';    }    var oldDate = new Date();    console.log(oldDate - newDate);</script>

构想下，如果要实现以上的操作，浏览器须要花多少秒？
运行以上代码：

能够看到，总共须要破费1秒多，将近2秒。呈现这种状况的起因次要为：字符串是不可变的，每次创立新的字符串都须要开拓新的空间进行存储数据，因而增加1000个元素，也即须要开拓1000个空间，所以当数据量一直减少的时候，效率会变得越来越低。

  1. 采纳数组拼接的形式

同样是增加1000个元素，这时采纳数组拼接的形式进行，代码如下：

<div></div><script>    var arr = [];    var newDate = new Date();    for (var i = 0; i < 1000; i++) {        arr.push('<a href="#">新增加的</a>');    }    document.querySelector('div').innerHTML = arr.join('');    var oldDate = new Date();    console.log(oldDate - newDate);</script>

运行后果如下：

能够看到，此时浏览器实现以上操作仅需0.005秒，相比字符串的拼接效率大大升高。

总结
  1. 数据量比拟小的状况下：两种形式都能够采纳
  2. 数据量比拟大：倡议采纳数组拼接的形式

3. document.createElement

应用办法
<div></div><script>    var a = document.createElement('a');    var div = document.querySelector('div');    div.appendChild(a);</script>
作用

给某一元素增加子元素

应用效率剖析

同样思考增加1000个元素的场景，代码如下：

<div></div><script>    var div = document.querySelector('div');    var newDate = new Date();    for (var i = 0; i < 1000; i++) {        var a = document.createElement('a');        div.appendChild(a);    }    var oldDate = new Date();    console.log(oldDate - newDate);</script>

运行后果如下：

能够看到运行工夫还是比拟低的。

总结

  1. 非必须状况不倡议应用document.write()
  2. 尽管innerHTML形式的数组拼接办法与createElement效率差不多，然而当数据量很大的状况下， 不同浏览器下，innerHTML效率比createElement高，读者能够自行上来实际。