如何将新列表项添加到无序列表中

How to add new list item to unordered list

本文关键字：列表 添加 无序 新列表      更新时间：2023-09-26

我有一个HTML页面，其中有一个无序列表，如下所示（简化）：

<ul id="myList">
    <li id="item1">Item 1 <a href="javascript:void(0)" class="myButton">Add</a></li>
    <li id="item2">Item 2 <a href="javascript:void(0)" class="myButton">Add</a></li>
    <li id="item3">Item 3 <a href="javascript:void(0)" class="myButton">Add</a></li>
    <li id="item4">Item 4 <a href="javascript:void(0)" class="myButton">Add</a></li>
    <li id="item5">Item 5 <a href="javascript:void(0)" class="myButton">Add</a></li>
</ul>

有没有一种方法可以使用jQuery通过单击相应的按钮在当前列表项下面添加一个新的列表项？示例：如果单击项目2的按钮，我希望在项目2和项目3之间添加新的列表项目。

我不确定我是否可以在这里使用"after"，如果，如何在这种情况下应用它，或者是否有更好的方法。

$('#myList').on('click', '.myButton', function () {
    $(this).closest('li').after(createItem());
});
function createItem() {
    //return your HTML, a jQuery object or a DOM element representing
    //the new item to add
}

请注意，我没有为id数字而烦恼，因为我认为您可能不需要id属性（我想它们是您解决问题的一部分？）。

这并不难。

function addAnItem(button){
	var newItem = $('<li>New Item <a href="javascript:void(0)" class="myButton">Add</a></li>');
	newItem.find('.myButton').click(function(){
		addAnItem(this);
	});
	$(button).parent().after(newItem);
}
var list = $('ul').find('.myButton').click(function(){
	addAnItem(this);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
	<li id="item1">Item 1 <a href="javascript:void(0)" class="myButton">Add</a></li>
	<li id="item2">Item 2 <a href="javascript:void(0)" class="myButton">Add</a></li>
	<li id="item3">Item 3 <a href="javascript:void(0)" class="myButton">Add</a></li>
	<li id="item4">Item 4 <a href="javascript:void(0)" class="myButton">Add</a></li>
	<li id="item5">Item 5 <a href="javascript:void(0)" class="myButton">Add</a></li>
</ul>

已经有很多答案了，但只是想添加我的解决方案。想办法做到这一点对我来说是一次有趣的锻炼。

$('.myButton').click(function() {
    $('<li>New Item</li>').insertAfter($(this).closest('li'));
});

var addedLis=0
$(function(){
    $("#myList").on("click",".myButton",function(){
        addedLis++;
        var _newLI='<li id="addedItem'+addedLis+'">Added Item '+addedLis+' <a href="javascript:void(0)" class="myButton">Add</a></li>'
        $(this).parent().after(_newLI);
    });    
});

示例

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<ul id="myList">
    <li id="item1">Item 1 <a onclick='$(this).append("<li>a</li>");' class="myButton">Add</a></li>
    <li id="item2">Item 2 <a onclick='$(this).append("<li>a</li>");' class="myButton">Add</a></li>
    <li id="item3">Item 3<a onclick='$(this).append("<li>a</li>");' class="myButton">Add</a></li>
    <li id="item4">Item 4 <a onclick='$(this).append("<li>a</li>");' class="myButton">Add</a></li>
    <li id="item5">Item 5 <a onclick='$(this).append("<li>a</li>");' class="myButton">Add</a></li>
</ul>

相关文章：