XML数据不会进入子元素

-1

我刚刚开始了解XMLHttpRequest并从JavaScript文件中获取XML文件中的数据，所以我一直在摆弄这段代码（从W3C site, on displaying XML data），并以此结尾：XML数据不会进入子元素

<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

有没有什么办法让内容在便笺格（无表请） - 不依赖于特殊的一个浏览器的功能，并会在移动Safari浏览器上工作？

来源

2015-07-19 Cat Overlord

你应该避免同步的XMLHttpRequest - 火狐30的他们被认为是不用 –

问题是，您正在使用.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。

来源

2015-07-19 04:09:16 nnnnnn

XML数据不会进入子元素

回答

相关问题