點(diǎn)擊按鈕變?yōu)椋?br />
提前說下結(jié)論：善用innerHTML屬性，但是不能過于依賴，否則會(huì)造成改動(dòng)過大，不利于程序穩(wěn)定性。
首先，結(jié)構(gòu)部分為：

<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；改變小；作為次推薦選項(xiàng)。

  <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"); //新建文本節(jié)點(diǎn) const tx = document.createTextNode("swans"); function myActive() { 
 //將文本節(jié)點(diǎn)設(shè)為li節(jié)點(diǎn)的子節(jié)點(diǎn) swa.appendChild(tx); //將li節(jié)點(diǎn)放在相應(yīng)位置 ol.insertBefore(swa, spe); } </script>

• 方法三：代碼量最小，但是改動(dòng)較大，不推薦使用

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

向有序列表尾部添加選項(xiàng)，使用方法三，代碼量會(huì)相對(duì)更少，但是同樣不推薦使用，只領(lǐng)會(huì)令人驚嘆的innerHTML屬性就好。

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

總結(jié)

以上是生活随笔為你收集整理的js添加元素的三种方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。