js动态添加与删除ul中的li

最新推荐文章于 2024-02-20 11:54:06 发布

原创最新推荐文章于 2024-02-20 11:54:06 发布 · 471 阅读

1 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

5 篇文章

订阅专栏

本文提供了一个使用HTML和JavaScript操作列表元素的示例，包括删除指定行和在列表中添加新项的功能。通过简单的按钮点击即可实现交互效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<ul id="s">
[*]11111111111111111

[*]22222222222222222

[*]33333333333333333

[*]44444444444444444

[*]55555555555555555

</ul>

<input type="button" value="删除第2行" onclick="del(2);">
<input type="button" value="删除第3行" onclick="del(3);">
<input type="button" value="添加到最后行" onclick="add(-1,'最后行');">
<input type="button" value="添加到第二行" onclick="add(2,'第二行');">
<script>
function del(n)
{
var s=document.getElementById('s');
var t=s.childNodes.length;
for (var i=0;i<t;i++)
{
if (i==n-1)
{
s.removeChild(s.childNodes[i]);
}
}
}
function add(n,txt)
{
var s=document.getElementById('s');
var t=s.childNodes.length;
var li= document.createElement("li");
li.innerHTML=txt;
for (var i=0;i<t;i++)
{
if (n==-1)
{
s.appendChild(li);
}
else if (i==n-1)
{
s.insertBefore(li,s.childNodes[i]);
}
}
}
</script>