javascript - 来自 XML 的 Ajax html 代码输出(无序列表)未附加在 div 中

Question

我创建了一个 XML 文件来存储在无序列表中使用的项目，并通过页面加载时的 Ajax 调用来访问它。问题是，AJAX 结果没有附加到我的 div 元素中。我从 Ajax 调用复制了生成的 HTML 代码并将其粘贴到 div 中，它工作正常，甚至显示了子元素。我计划一直这样做到第三级(孙子)，但省略了孙子部分，这样我就可以一次解决一个问题。

这是我的 XML:

<?xml version="1.0" encoding="utf-8" ?> 
<!-- this is a comment -->
<modules title="Modules" author="Gian Orpilla" createdDate="6/29/2016" modifiedBy="" modifiedDate="">
    <!-- *********** Parent 1 module ************--> <!-- TESTER FOR CLICKABLE GRANDCHILD AND CHILD-->
    <module name="Parent 1" icon="icon icon-display" h2="Parent 1 Tasks" link=""  li="icon icon-arrow-left" type="parent">
        <child name="Parent 1 Child 1" icon="icon icon-phone" h2="Parent 1 Child 1 Processes" link="" li="icon icon-arrow-left" type="child">
        </child>
        <child name="Parent 1 Child 2" icon="icon icon-tv" h2="" link="#" li="" type=""></child>
    </module>
    <!-- *********** Parent 1 module ************-->
    <!-- *********** Parent 2 module ************--> <!-- TESTER FOR CLICKABLE CHILD-->
    <module name="Parent 2" icon="icon icon-camera" h2="Parent 2 Tasks" link="" li="icon icon-arrow-left" type="parent">
          <child name="Parent 2 Child 1" icon="icon icon-shop" h2="Parent 2 Child 1 Processes" link="" li="" type=""></child>
          <child name="Parent 2 Child 2" icon="icon icon-diamond" h2="Parent 2 Child 2 Processes" link="" li="" type=""></child>
    </module>
    <!-- *********** Parent 2 module ************-->
    <!-- *********** Parent 3 module ************--> <!-- TESTER FOR 2 GRANDCHILD-->
    <module name="Parent 3" icon="icon icon-t-shirt" h2="Parent 3 Tasks" link="" li="icon icon-arrow-left" type="parent">
        <child name="Parent 3 Child 1" icon="icon icon-female" h2="Parent 3 Child 1 Processes" link=""  li="icon icon-arrow-left" type="child">
        </child>
        <child name="Parent 3 Child 2" icon="icon icon-male" h2="Parent 3 Child 2 Processes" link=""  li="icon icon-arrow-left" type="child">
        </child>
    </module>
    <!-- *********** Parent 3 module ************-->
    <!-- *********** Parent 4 module ************--> <!-- TESTER FOR CLICKABLE MODULE-->
    <module name="Parent 4" icon="icon icon-food" h2="" link="#"  li="" type=""></module>
    <!-- *********** Parent 4 module ************-->
</modules>

下面是我的 ajax 调用:

$.ajax({
        type: 'GET',
        url: '../ExternalPages/ListXML.xml',
        dataType: 'xml',
        success: function (xml) {
            var chunk = "<ul>"; //initiation of list

            $(xml).find('module').each(function () {

                //parent vars
                var li = $(this).attr('li');
                var name = $(this).attr('name');
                var icon = $(this).attr('icon');
                var h2 = $(this).attr('h2');
                var link = $(this).attr('link');

                //child vars
                var li2;
                var name2;
                var icon2;
                var h22;
                var link2;

                //grandchild vars


                chunk = chunk + '<li class="' + li + '">' + //initiation of parent li and li class(if has child)
                    '<a class="' + icon + '" href="' + link + '">' + name + '</a>' + //inititation of parent link
                    '<div class="mp-level">' + '<h2 class="' + icon + '">' + h2 + '</h2>'; // initiation of header of child

                //start of child element
                if ($(this).attr('type')) {

                    chunk = chunk + '<ul>'; //initiation of child ul

                    $(this).find('child').each(function () {
                        //assigning to child values
                        li2 = $(this).attr('li');
                        name2 = $(this).attr('name');
                        icon2 = $(this).attr('icon');
                        h22 = $(this).attr('h2');
                        link2 = $(this).attr('link');

                        chunk = chunk + '<li class="' + li2 + '">' + //initiation of child li and li class(if has child)
                        '<a class="' + icon2 + '" href="' + link2 + '">' + name2 + '</a>' + //inititation of child link
                        '<div class="mp-level">' + '<h2 class="">' + h22 + '</h2>'; // initiation of header of grandchild
                        chunk = chunk + '</div></li>'; //ending of child li div mp-level
                    });

                    chunk = chunk + '</ul>'; //end of child ul
                }
                //end of child element

                chunk = chunk + '</div></li>'; //ending of parent li, div mp-level and child ul
            });

            chunk = chunk + '</ul>'; //ending of list

            $('#ListNav').append(chunk);
        },
        error: function () {
            alert('oops');
        }
    });

这是位于正文中的 div:

<div id="ListNav" class="mp-level">
	    <h2 class="icon icon-world">All Modules</h2>
	</div>

这是我复制粘贴到 div 中的 ajax 的结果，它实际上有效。 (为了更容易理解而将其间隔开):

<ul>
    <li class="icon icon-arrow-left">
        <a class="icon icon-display" href="">Parent 1</a>
        <div class="mp-level">
            <h2 class="icon icon-display">Parent 1 Tasks</h2>
            <ul>
                <li class="icon icon-arrow-left">
                    <a class="icon icon-phone" href="">P1 Child 1</a>
                    <div class="mp-level">
                        <h2 class="">P1 Child 1 Processes</h2>
                    </div>
                </li>
                <li class="">
                    <a class="icon icon-tv" href="#">P1 Child 2</a>
                    <div class="mp-level">
                        <h2 class=""></h2>
                    </div>
                </li>
            </ul>
        </div>
    </li>
    <li class="icon icon-arrow-left">
        <a class="icon icon-camera" href="">Parent 2</a>
        <div class="mp-level">
            <h2 class="icon icon-camera">Parent 2 Tasks</h2>
            <ul>
                <li class="">
                    <a class="icon icon-shop" href="">P2 Child 1</a>
                    <div class="mp-level">
                        <h2 class="">P2 Child 1 Processes</h2>
                    </div>
                </li>
                <li class="">
                    <a class="icon icon-diamond" href="">P2 Child 2</a>
                    <div class="mp-level">
                        <h2 class="">P2 Child 2 Processes</h2>
                    </div>
                </li>
            </ul>
        </div>
    </li>
    <li class="icon icon-arrow-left">
        <a class="icon icon-t-shirt" href="">Parent 3</a>
        <div class="mp-level">
            <h2 class="icon icon-t-shirt">Parent 3 Tasks</h2>
            <ul>
                <li class="icon icon-arrow-left">
                    <a class="icon icon-female" href="">P3 Child 1</a>
                    <div class="mp-level">
                        <h2 class="">P3 Child 1 Processes</h2>
                    </div>
                </li>
                <li class="icon icon-arrow-left">
                    <a class="icon icon-male" href="">P3 Child 2</a>
                    <div class="mp-level">
                        <h2 class="">P3 Child 1 Processes</h2>
                    </div>
                </li>
            </ul>
        </div>
    </li>
    <li class="">
        <a class="icon icon-food" href="#">Parent 4</a>
        <div class="mp-level">
            <h2 class="icon icon-food"></h2>
        </div>
    </li>
</ul>

显然，我做错了什么，但不确定是什么。

Answer 1

我尝试了你的代码，并为我填充并附加了 UL。如果它正在创建 html 并且只是不附加，则可能意味着它无法找到 div。

你能尝试一下吗 -

console.log($('#ListNav'));

看看它是否获得了Div？