Question

我刚刚开始学习XMLHttpRequest并从javascript中获取XML文件中的数据，所以我一直在摆弄这段代码（来自W3C site, on displaying XML data），最后得到了这个：

<style>
div[ui="note"] {
border: 1px solid #999;
color: red;
}

</style>
</head>


<div ui="panel-area">
    <div ui="panel">

        <div ui="note">
            <strong>Content should be here</strong>
        </div>
    </div>
</div>

<script>
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET","xml.xml",false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML; 

var x = xmlDoc.getElementsByTagName("CD");
for (i=0;i<x.length;i++)
  { 
document.querySelector('div[ui="panel"]').innerHTML += "<div ui='note'><strong>Content should be here</strong>";
document.querySelector('div[ui="panel"]').innerHTML += x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue;
}
document.querySelector('div[ui="panel"]').innerHTML +="</div>";
</script>
</body>

XML：

<?xml version="1.0" encoding="UTF-8"?>
<CATALOG>
<CD>
    <ARTIST>Bob Dylan</ARTIST>
</CD>
<CD>
    <ARTIST>Bonnie Tyler</ARTIST>
</CD>
 <!-- Lots more names -->
</CATALOG>

这会在下面创建一个艺术家名称为的<div ui="note">，但问题是，我无法让它进入<div ui="note">：

This is the image of the result

有没有办法将内容放入note div（请不要使用表格） - 这不依赖于特殊的单浏览器功能，并且可以在移动游戏中使用？

Answer 1

问题是您使用.innerHTML += ...将不完整的html片段连接到'div[ui="panel"]'元素。

在第一行添加：

"<div ui='note'><strong>Content should be here</strong>"

但浏览器不知道稍后您会添加结束"</div>"标记几行，因此它不知道您想要将您的艺术家名称字符串放在该div中。

（另外，即使确实有效，你的循环会创建多个新的开放<div>标记，但只会在循环后添加一个结束</div>。）

尝试创建完整的html，然后一步将其添加到面板div：

var newHTML = "";
for (i=0;i<x.length;i++) { 
   newHTML += "<div ui='note'><strong>Content should be here</strong>"
            + x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue
            + "</div>";
}
document.querySelector('div[ui="panel"]').innerHTML += newHTML;

如果您希望每个艺术家名称出现在您拥有硬编码“内容应该在这里”字符串的位置，请尝试以下操作：

var newHTML = "";
for (i=0;i<x.length;i++) { 
   newHTML += "<div ui='note'><strong>"
            + x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue
            + "</strong></div>";
}
document.querySelector('div[ui="panel"]').innerHTML += newHTML;

请注意，这与您正在执行ajax请求或源数据是xml格式的事实无关。这就是你将这些值放在一起作为不太有效的html的方式。

XML数据不会进入子元素

1 个答案: