我创建了一个 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>显然，我做错了什么，但不确定是什么。
最佳答案
我尝试了你的代码，并为我填充并附加了 UL。如果它正在创建 html 并且只是不附加，则可能意味着它无法找到 div。
你能尝试一下吗 -
console.log($('#ListNav'));
看看它是否获得了Div？
关于javascript - 来自 XML 的 Ajax html 代码输出(无序列表)未附加在 div 中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38113118/