Angehängter Inhalt bekommt nicht den richtigen CSS-Effekt

Question

Ich möchte ein HTML-Element an eine DIV anhängen, aber diese bekommt nicht das richtige CSS wie die ursprünglichen.

Ich habe ein Dropdown-Menü, und will daran neue Zeilen <li> anhängen.

Mein HTML-Code:

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

Mein JavaScript-Code:

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

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

     return false; 

}); 

hier ein anschauliches Beispiel: http://jsfiddle.net/dJDHd/2136/

MIT Mein Hauptproblem EDITED: https://jsfiddle.net/Lr7gn020/1/

Klicken Sie auf APPEND IT und überprüfen Sie dann das angehängte Element, indem Sie auf Select One button (Dropdown-Menü) klicken, und Sie werden sehen, dass es nicht das richtige CSS wie die anderen (Item Test) erhält.

Answer 1

Sie haben eine div in der verschachtelt und die Stile Ziel .dropdown-menu>li>a, so dass das Div das bricht. A div kann kein direktes Kind von ul und li sein kann kein direktes Kind von div sein. Anstatt div in ul zu verschachteln, dann li an die div anzufügen, können Sie $.prepend()li direkt zum Menü, wenn Sie möchten, dass sie am Anfang des Menüs erscheinen, wenn Sie sie hinzufügen. Wenn es Ihnen egal ist, wo sie erscheinen, können Sie stattdessen $.append() nach unten.

$(document.body).on('click', '.append', function(event) { 
 
    $(".dropdown-menu").prepend("<li><a href=\"#\">Item Test</a></li>"); 
 
    return false; 
 
});

.btn-input { 
 
    display: block; 
 
} 
 

 
.btn-input .btn.form-control { 
 
    text-align: left; 
 
} 
 

 
.btn-input .btn.form-control span:first-child { 
 
    left: 10px; 
 
    overflow: hidden; 
 
    position: absolute; 
 
    right: 25px; 
 
} 
 

 
.btn-input .btn.form-control .caret { 
 
    margin-top: -1px; 
 
    position: absolute; 
 
    right: 10px; 
 
    top: 50%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<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"> 
 
       <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/>

Answer 2

Ändern Sie Ihre jquery Teil.

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

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

    return false; 

}); 

Answer 3

Der Grund hinter der angehängten Option, die verschiedene CSS hat, liegt an der Tatsache, dass Sie es innerhalb eines div-Elements anhängen.

Das aktuelle CSS der li-Elemente stammt vom Bootstrap css mit diesem Selektor.

dropdown-menu>li>a 

Da Sie ein div Knoten innerhalb ul haben (was falsch ist und html ungültig machen), und Sie sind Anfügen eines neuen li innerhalb dieses div mit JS, die oben Wähler nicht erreichen diesen Knoten und CSS werden nicht angewendet.

Sie sollten den li-Knoten direkt unter dem ul-Knoten hinzufügen.

Fiddle "anhängen" http://jsfiddle.net/9med3Lou/