XML 数据不会进入子元素

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

有没有什么方法可以将内容添加到笔记中 div（请不要表格）- 不依赖于特殊的单一浏览器功能，并且可以在移动 safari 上运行？

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;

如果您希望每个艺术家的名字出现在您有硬编码 "Content should be here" 字符串的地方，那么试试这个：

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 数据不会进入子元素

XML data will not go into child element

html

javascript

css

xml

xmlhttprequest