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

Question

我有一个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"此处使用"after" ，以及在这种情况下如何使用它，或者是否有更好的方法来使用它。

Answer 1

$('#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属性（我想它们是您解决问题的一部分吗？）。

Answer 2

好吧，这并不难。

 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> 

Answer 3

已经有很多答案，但只想添加我的解决方案。 对我来说，弄清楚如何做到这一点很有趣。

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

Answer 4

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);
    });    
});

例

Answer 5

 <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>