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>