javascript - 将搜索 div 添加为第一个导航列表项

Question

当用户单击菜单 bav 按钮时，我的搜索控件会显示在移动版本中。 搜索控件包含在以下 div 内 <div class="search-nav-w">...</div>

我的菜单结构如下

<div id="cssmenu">
    <div id="menu-button" class="menu-opened"></div>
    <ul>
        <li><a href="">HOME</a></li>
        <li><a href="/about-us/">About Us</a></li>
        <li><a href="/news/">News</a></li>
    </ul>

我希望我的菜单结构将搜索 div 附加到 ul nav，这样我的 HTML 就会像这样

<div id="cssmenu">
    <div id="menu-button" class="menu-opened"></div>
    <ul>
        <li>
            <div class="search-nav-w">...</div>
        </li>
        <li><a href="">HOME</a></li>
        <li><a href="/about-us/">About Us</a></li>
        <li><a href="/news/">News</a></li>
    </ul>

我很有趣地关注 jquery，但它对我不起作用

$("#cssmenu > ul").append("<li>"+$(".search-nav-w")+"</li>");

已更新 我尝试前置和附加，但它显示我的列表项为 <li>[object Object]</li>

Answer 1

您可以使用prependTo移动，wrap 将元素包裹在其他元素中。

Insert every element in the set of matched elements to the beginning of the target.

Demo

$(".search-nav-w").wrap('<li id="search"></li>');
$('#search').prependTo($("#cssmenu > ul"));