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

Question

我有以下 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>

请指教，

谢谢!

Answer 1

您可以将您的<li>作为模板并将其附加到 <ul>使用jquery。你可以尝试这样的Fiddle :

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