javascript - 使用jQuery将列表项动态添加到ul

我有以下html结构：

  <div id="gw-sidebar" class="gw-sidebar">

    <div class="nano-content">
      <ul class="gw-nav gw-nav-list">
        <li class="init-un-active"> <a href="javascript:void(0)"> <span class="gw-menu-text">Scenarios</span> </a> </li>

         //===>Need to add the new list using Jquery here

      </ul>

    </div>

  </div>

我想使用jquery向上面显示的类'init-un-active'添加如下所示的列表：

        <li class="init-arrow-down"> <a href="javascript:void(0)"> <span class="gw-menu-text">Scenario-1</span> <b class="gw-arrow"></b> </a>
          <ul class="gw-submenu">
            <li> <a href="javascript:void(0)">Scenario</a> </li>
            <li> <a href="javascript:void(0)">Resolutions</a> </li>
            <li> <a href="javascript:void(0)">Triggers</a> </li>
          </ul>
        </li>

如何使用jquery将代码动态添加到上述类中？

我尝试了以下方法，但无法正常工作：

<script type="text/javascript">
function loadScenarioForm () {
    SideMenu.createBaseEntry();
   // ScenarioForm.create();
}

var SideMenu = {
container : null,

scenarioCount : 0,

scenarioTxt : "Scenario",
ResolutionsTxt : "Resolutions",
TriggersTxt : "Triggers",
menuLink : "javascript:void(0)",
subMenuLink1 : "javascript:void(0)",
subMenuLink2 : "javascript:void(0)",
subMenuLink3 :"javascript:void(0)",


createBaseEntry : function createDefault () {
    this.container = $(document.createElement('div'));
    this.container.addClass('gw-sidebar');
    var html = "";
    html += '<div id="gw-sidebar" class="gw-sidebar">';
    html += '<div class="nano-content">';
    html += '<ul class="gw-nav gw-nav-list">';
    html += '<li class="init-un-active"> <a href="javascript:void(0)"> <span class="gw-menu-text">Scenarios</span> </a> </li>';
    html += '</ul></div></div></div>';

    this.container.append(html);
    $('body').append(this.container);

    this.scenarioCount++;
    this.container.append(this.createEntry(scenarioCount));



},

createEntry : function createDefault (index) {
    var list = $('ul.mylist');
    var li = $('<li/>')
    .addClass('ui-menu-item')
    .attr('role', 'menuitem')
    .appendTo(list);
    return list;

},
</script>

请指教，

谢谢！

最佳答案

您可以将<li>用作模板，并使用jquery将其附加到<ul>。您可以尝试如下Fiddle：

$(document).ready(function(){
    $('a').click(function() {
      var template = $('#hidden-template').html();
        $('.gw-nav').append(template);
});
});

关于javascript - 使用jQuery将列表项动态添加到ul，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30565553/