关于javascript:js三种动态创建元素的区别

概述

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 高，读者能够自行上来实际。