js添加元素的三种方法

大家好，又见面了，我是你们的朋友全栈君。

点击按钮变为：

提前说下结论：善用innerHTML属性，但是不能过于依赖，否则会造成改动过大，不利于程序稳定性。
首先，结构部分为：

<div>
        <ol>
            <li id="spe">speedo</li>
            <li>arena</li>
            <li>balenire</li>
        </ol>
        <button id="btn01" onclick="myActive()">new a list on the summit</button>
    </div>

• 方法一：推荐使用，变化最小，代码量最少

    <script type="text/javascript"> const ol = document.querySelector("ol"); const spe = document.getElementById("spe"); const btn01 = document.getElementById("btn01"); const swa = document.createElement("li"); function myActive() { 
      swa.innerHTML = "swans"; ol.insertBefore(swa,spe); } </script>

• 方法二：代码量大，但可以深入理解DOM；改变小；作为次推荐选项。

  <script type="text/javascript"> const ol = document.querySelector("ol"); const spe = document.getElementById("spe"); const btn01 = document.getElementById("btn01"); // 新建li元素 const swa = document.createElement("li"); //新建文本节点 const tx = document.createTextNode("swans"); function myActive() { 
      //将文本节点设为li节点的子节点 swa.appendChild(tx); //将li节点放在相应位置 ol.insertBefore(swa, spe); } </script>

• 方法三：代码量最小，但是改动较大，不推荐使用

	<script type="text/javascript"> const ol = document.querySelector("ol"); const btn01 = document.getElementById("btn01"); function myActive() { 
      var temp = ol.innerHTML; ol.innerHTML = "<li>swans</li>"; ol.innerHTML += temp; } </script>

向有序列表尾部添加选项，使用方法三，代码量会相对更少，但是同样不推荐使用，只领会令人惊叹的innerHTML属性就好。

	<script type="text/javascript"> const ol = document.querySelector("ol"); const btn01 = document.getElementById("btn01"); function myActive() { 
      ol.innerHTML += "<li>swans</li>"; } </script>