大家好，又见面了，我是你们的朋友全栈君。
点击按钮变为：
提前说下结论：善用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>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/152070.html原文链接：https://javaforall.net
![Unix/Linux fork前传[通俗易懂]](https://javaforall.net/wp-content/uploads/2020/11/2020110817443450-480x300.jpg)
