将搜索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来包装其他元素的元素。

将匹配元素集中的每个元素插入目标的开头。

演示

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

Answer 2

不确定是否要添加输入字段。

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

JS

var _serachMenu =$("<li><div class='search-nav-w'></div></li>")
$("#cssmenu > ul").prepend(_serachMenu);

用于测试div是否存在的CSS

.search-nav-w{
    width:40px;
    height:40px;
   border:1px solid red;

}

的jsfiddle

Answer 3

您将$(".search-nav-w")而不是作为对象，而是作为HTMLstring （将其显示为[object Object] ）。
尝试使用：

$("#cssmenu > ul").prepend('<li><div class="search-nav-w"></div></li>');