请问下有可能点击的时候同步更新li标签中内容么

来源：4-10 自由编程

vivi_li

2020-06-17 15:28:08

我是想使用动态方法填充li标签中的内容同步创建的li无法同步更新里面的内容，有实现方法么，除了生成的同时获取一下之前的长度然后填充内容

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.red {
color: red;
}
</style>
</head>
<body>
<button id="btn">添加</button>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
<script src="https://cdn.bootcss.com/zepto/1.1.7/zepto.min.js"></script>
<script>
$(document).ready(function () {
$('#btn').on('click',function () {
$('ul').append('<li></li>')
});
for (i = 0; i < $('li').length; i++) {
$('li').eq(i).text(i + 1)
}
$('ul').on('mouseover', 'li', function () {
$(this).addClass('red').siblings().removeClass('red');
})
})
</script>
</html>