Javascript 附加的内容无法获得正确的CSS效果

我想在

DIV

中添加一个HTML元素，但是这个元素没有像原始元素那样获得正确的CSS

我有一个下拉菜单，想在上面添加新的

行

我的HTML代码：

<br/><br/>
<a href="#" class="append">Append it</a>

<div class="container">
   <div class="row">

      <div class="col-sm-3">
         <h5>Normal Dropdown Button</h5>

         <div class="panel panel-default">
            <div class="panel-body">
               <div class="btn-group">
                 <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                   <span data-bind="label">Select One</span>&nbsp;<span class="caret"></span>
                 </button>
                 <ul class="dropdown-menu" role="menu">
                   <div id="append">

                   </div>
                   <li><a href="#">Item 1</a></li>
                   <li><a href="#">Another item</a></li>
                   <li><a href="#">This is a longer item that will not fit properly</a></li>
                 </ul>
               </div>
             </div>
          </div>

      </div>

   </div>


</div>
<br/><br/>

$( document.body ).on( 'click', '.append', function( event ) {

      $("#append").append("<li><a href=\"#\">Item 1</a></li>");

      return false;

});

正常下拉按钮
选择一个

我的Javascript代码：

<br/><br/>
<a href="#" class="append">Append it</a>

<div class="container">
   <div class="row">

      <div class="col-sm-3">
         <h5>Normal Dropdown Button</h5>

         <div class="panel panel-default">
            <div class="panel-body">
               <div class="btn-group">
                 <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                   <span data-bind="label">Select One</span>&nbsp;<span class="caret"></span>
                 </button>
                 <ul class="dropdown-menu" role="menu">
                   <div id="append">

                   </div>
                   <li><a href="#">Item 1</a></li>
                   <li><a href="#">Another item</a></li>
                   <li><a href="#">This is a longer item that will not fit properly</a></li>
                 </ul>
               </div>
             </div>
          </div>

      </div>

   </div>


</div>
<br/><br/>

$( document.body ).on( 'click', '.append', function( event ) {

      $("#append").append("<li><a href=\"#\">Item 1</a></li>");

      return false;

});

$（document.body）.on（'click'，'.append'，函数（事件）{
$（“#append”）。append（“
”）；
返回false；
});

这里有一个活生生的例子：

编辑我的主要问题：

---

单击APPEND IT，然后通过单击Select One按钮（下拉菜单）检查APPEND元素，您将看到它没有像其他按钮一样获得正确的CSS（项目测试）。

您已经在

ul

和样式目标

中嵌套了
div
。下拉菜单>li>a

，因此div正在打破这一点。

div

不能是

ul

的直接子级，

li

不能是

div

的直接子级。如果希望在添加

div

时将它们显示在菜单的开头，则可以将

div

嵌套在

ul

中，然后将

li

附加到

div

中，而不是将

div

嵌套在

中。如果您不在乎它们出现在哪里，您可以将它们添加到底部


$（document.body）.on（'click'，'.append'，函数（事件）{
$（“.dropdown menu”）.prepend（“
”）；
返回false；
});
.btn输入{
显示：块；
}
.btn输入.btn.form-control{
文本对齐：左对齐；
}
.btn input.btn.form-control范围：第一个子项{
左：10px；
溢出：隐藏；
位置：绝对位置；
右：25px；
}
.btn input.btn.form-control.caret{
页边顶部：-1px；
位置：绝对位置；
右：10px；
最高：50%；
}




正常下拉按钮
选择一个







更改您的
jquery
部件

$( document.body ).on( 'click', '.append', function( event ) {

    $(".dropdown-menu").append("<li><a href=\"#\">Item 1</a></li>"); //append with ul, not div

    return false;

});

$（document.body）.on（'click'，'.append'，函数（事件）{
$（“.dropdown menu”）.append（“
”）；//附加ul，而不是div
返回false；
});
附加选项具有不同css的原因是您将其附加到div元素中

li元素的当前CSS来自具有此选择器的引导CSS

   dropdown-menu>li>a

由于您在ul中有一个div节点（这是错误的，并且使html无效），并且您正在使用JS在该div中添加一个新的li，因此上述选择器将不会到达该节点，并且不会应用CSS

您应该将li节点直接添加到ul节点下

小提琴：
#下拉菜单不存在。它应该是
。下拉菜单
@JisMaxi当我单击“附加它”时，你的小提琴没有做任何事情。但根本原因仍然是一样的。Bootstrap的CSS以
为目标。下拉菜单>li>a
不会以
li
内部的嵌套
ul
为目标。