如何在<ul>列表中添加元素</ul>

Question

我正在使用bootstrap typeahead.js来显示下拉列表。我有这个：

<ul class="abc">
        <li class="data-list"></li>
        <li class="data-list"></li>
        <li class="data-list"></li>
        <li class="data-list"></li>
        <li class="data-list"></li>
    </ul>

我想在列表中添加一个元素

，如下所示：

<ul class="abc">
        <p>This is a list page</p>
        <li class="data-list"></li>
        <li class="data-list"></li>
        <li class="data-list"></li>
        <li class="data-list"></li>
        <li class="data-list"></li>
    </ul>

下面是iim尝试添加元素的截图。

元素应高于第一个<li>，即'Testing'。 有什么想法吗？谢谢！

Answer 1

如果您决定使用jQuery，则可以使用prepend()

$(".abc").prepend("<p>This is a list page</p>");

虽然如果你有多个列表或多个元素与该类，我可能会为该特定列表分配一个唯一的ID，并使用它来在元素上添加一些东西。

当然，如果你想添加一个正确的HTML <li>元素，那就类似了。

$(".abc").prepend("<li>This is a list page</li>");

根据Alejandro的建议：如果你想将段落元素用于自定义样式，你可以在前面的列表元素中添加一个类，然后从那里修改CSS。

$('.abc').prepend( $('<li>This is a list page</li>').addClass('data-text') );

然后，您可以在li.data-text中添加样式，而不会在列表中不正确地使用段落。