点击按钮,向下添加目录。Java script+jQuery写法

 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>

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值