jQuery附加div不包含子元素

Question

我正在一家餐厅网站上工作。 我正在尝试使用jQuery来解析和显示一些XML（餐厅菜单）为HTML。 我能够显示所有信息，但是由于某种原因，我无法将其全部包含在div中。

$(document).ready(function() {
  // Load XML
  $.get('http://openmenu.com/menu/220685c2-f2ac-11e4-8a6d-00163eeae34c', function(d) {
    // For Each menu_group (eg. Cold Subs, Hot Subs, Hotdogs etc.)
    $(d).find('menu_group').each(function() {
      var $menu_group = $(this);
      var group_name = $menu_group.attr('name');
      var group_id = group_name.replace(" ", "");
      // Print menu_group html
      var htmlGroup = '<h2>' + group_name + '</h2>';
      $("#menuContent").append($(htmlGroup));

      $("#menuContent").append('<div class="menuGroup" id="' + group_id + '"><h1>BEGIN DIV</h1>');
      // For Each menu_item (eg. Meatball Sub, Cheesesteak)
      $($menu_group).find('menu_item').each(function() {
        $menu_item = $(this);
        item_name = $menu_item.find('menu_item_name').text();
        item_description = $menu_item.find('menu_item_description').text();
        item_price = $menu_item.find('menu_item_price').text();

        // Print menu_item html
        if (!item_price || 0 === item_price.length) {
          htmlItem = '<h4>' + item_name + ' $' + item_price + '</h4>';
        } else {
          htmlItem = '<h4>' + item_name + '</h4>';
        }
        $("#menuContent").append($(htmlItem));

        // For Each item_size (eg. Half (7"), 1/2 Dozen)
        $($menu_item).find('menu_item_size').each(function(index) {
          $item_size = $(this);
          item_size_name = $item_size.find('menu_item_size_name').text();
          item_size_cost = $item_size.find('menu_item_size_price').text();

          // Print item_size html
          htmlSize = '<span>' + item_size_name + ' : $' + item_size_cost + ' </span>';
          $('#menuContent').append($(htmlSize));
        }); // END For Each item_size

        // Print item_menu description
        htmlItemDescription = '<p>' + item_description + '</p>';
        $("#menuContent").append($(htmlItemDescription));
      }); // END For Each menu_item

      // For Each group_option (eg. Extra Toppings)
      $($menu_group).find('menu_group_option').each(function() {
        $menu_option = $(this);
        option_name = $menu_option.attr('name');
        option_description = $menu_option.find('menu_group_option_information').text();

        // Print group_option html
        var htmlOption = '<p>' + option_name + ' : ';
        htmlOption += '' + option_description + '</p>';
        $('#menuContent').append($(htmlOption));

        // For Each option_item (eg. Lettuce, Mayo, Bacon)
        $($menu_option).find('menu_group_option_item').each(function() {
          $option_item = $(this);
          option_item_name = $option_item.find('menu_group_option_name').text();
          option_item_cost = $option_item.find('menu_group_option_additional_cost').text();

          //Print option_item html
          var htmlOptionItem = '<li>' + option_item_name;
          if (!option_item_cost || 0 === option_item_cost.length) {
            htmlOptionItem += '</li>';
          } else {
            htmlOptionItem += ' : $' + option_item_cost + ' Extra</li>';
          }
          $('#menuContent').append($(htmlOptionItem));
        }); //END For Each option_item
      }); //END For Each group_option
      $("#menuContent").append("<p>WHY IS THIS NOT IN THE PARENT DIV?!?!</p></div>");
    }); //END For Each menu_group
  }); //END get()
}); //END document.ready()

这是说明我的问题的屏幕截图：

如果有帮助，我可以在注释中发布指向XML的链接（我没有足够的声誉来发布两个以上的链接）。 任何朝着正确方向前进的人将不胜感激。 相关搜索似乎都没有帮助我。

Answer 1

Barmar在评论中解决了我的问题。 我将子元素附加到$("#menuContainer")而不是父div $( “＃” + group_id