HTML结构
<body> <ol> <li>目录 1</li> <li>目录 2</li> <li>目录 3</li> </ol> <button id="btn1">添加目录</button> </body>
Java script执行代码
先通过标签获取ol全部内容
然后获取获取按钮
给按钮添加点击事件
在ol下面继续添加内容
<script type="text/JavaScript"> let ol=document.getElementsByTagName('ol')[0]; console.log(ol); let but=document.getElementById('btn1'); console.log(but); but.onclick=function(){ ol.innerHTML+=`<li>追加目录 4</li>`; }; </script>
jQuery执行代码
<script type="text/JavaScript" src="./js/jquery-3.4.1.js"></script> <script type="text/JavaScript"> $(document).ready(function(){ $("#btn1").click(function(){ $("ol").append("<li>追加目录 4</li>"); }); }); </script>
