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>