Question

我想在last-child元素之前动态地<li>添加到现有的<ul>。但是这个新的<li>必须是以下标记：

 <li>
    <span id="/*Previous tab's number + 1*/"> Previous tab's number +1 </span>
    <span class="x"></span>
</li>

我该怎么做，因为.insertBefore("ul li:last-child")只能根据我的理解插入裸<li></li>。

这是我目前的例子：

＆＃13;

$("#btn").click(function(){
    
 $("<li></li>").insertBefore($("ul li:last-child"));
    
})

＆＃13;

button:hover {
    cursor: pointer;
}

.x:after {
    content: "+";
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li>
        <span id="tab_1">Tab 1</span>
        <span class="x"></span>
    </li>
    
    <li>
        <span id="last">Last item</span>
        <span class="x"></span>
    </li>
    
</ul>

<button type="Button" id="btn">Create one more item</button>

＆＃13;

Answer 1

它只插入“裸”<li>元素，因为这是您在此行中指定的内容：

$("<li></li>").insertBefore($("ul li:last-child"));

$("<li></li>")只代表一个空元素。

您可以使用任何元素“之前插入”。以此为例：

var newLi = $("<li>");
newLi.text("This is some new content");
newLi.addClass("some_new_class");
newLi.insertBefore("ul li:last-child");

在此示例中，newLi变量可以包含您希望的任何元素。另请注意，传递给insertBefore函数的参数可以是选择器，您不需要实际的对象。看看我的例子，我使用了相同的选择器，但没有使用实际的对象：

.insertBefore("ul li:last-child")

$("#btn").click(function(){
     var newLi = $("<li>");
     newLi.text("This is some new content");
     newLi.addClass("some_new_class");
     newLi.insertBefore("ul li:last-child");   
})

button:hover {
    cursor: pointer;
}

.x:after {
    content: "+";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li>
        <span id="tab_1">Tab 1</span>
        <span class="x"></span>
    </li>
    
    <li>
        <span id="last">Last item</span>
        <span class="x"></span>
    </li>
    
</ul>

<button type="Button" id="btn">Create one more item</button>

Answer 2

您好，您可以使用:last选择器和前置/附加功能的组合来完成您的需要。

$("li:last").prepend("<li>*****</li>")

希望它有效。

添加带有特定标记的新列表项

2 个答案: