我正在使用引导程序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>上方,即“测试”。
有什么想法吗?谢谢!

最佳答案

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

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


尽管如果您具有该类的多个列表或多个元素,我可以为该特定列表分配一个唯一的ID,并使用该ID在该元素之前添加一些内容。

当然,如果您想添加一个<li>元素,该元素将是正确的HTML,则类似。

$(".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中添加样式,而不必在列表中使用不正确的段落。

10-05 20:44
查看更多