title: jQuery Create New LI tag in existing Bootstrap dropdown menu
body: <p>I want to create new <strong><code>&lt;li&gt;</code></strong> element and it should add that item to existing bootstrap dropdown menu <strong><code>(&lt;ul&gt;)</code></strong> by automatically using jQuery. The newly created item should also be auto-selected in dropdown.</p>
  
  <p>Can somebody please help me out?</p>
  
  <p>Thanks in advance!</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="btn-group"&gt;
    &lt;button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"&gt;
      Select Items &lt;span class="caret"&gt;&lt;/span&gt;
    &lt;/button&gt;
    &lt;ul class="dropdown-menu reddy" role="menu"&gt;
        &lt;li&gt;&lt;input type="text" class="form-control"&gt;&lt;button type="button" class="btn btn-primary btn-xs"&gt;Create New&lt;/button&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;&lt;label for="menuitem1"&gt;&lt;input type="checkbox" id="menuitem1" /&gt; Menu Item 1&lt;/label&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;&lt;label for="menuitem2"&gt;&lt;input type="checkbox" id="menuitem2" /&gt; Menu Item 2&lt;/label&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;&lt;label for="menuitem3"&gt;&lt;input type="checkbox" id="menuitem3" /&gt; Menu Item 3&lt;/label&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.form-control{max-width:140px;float:left;margin-right:5px;margin-left:10px;}
  .btn{margin-top:5px;}
  .open&gt;.dropdown-menu{width:250px;}
  </code></pre>
  
  <p>Please find the Preview in "<a href="http://jsfiddle.net/ReddyPrasad/s9Lkdpev/5/" rel="nofollow"><strong>Fiddle</strong></a>" here  </p>