Javascript 用HTML编写XML文件

我正在尝试使用XML文件，并使用HTML在我的网站上写出信息。这是一个学校项目，老师特别告诉我们使用XML和HTML。我的HTML已经包含了代码、图片、文本等，而且效果非常好。所以我试着把XML代码放在一个标记中，然后写出来。XML文件只是一个表，其中包含一些关于我最喜欢的篮球运动员的信息

我已经在网上搜索了几天了，但是我找不到关于这个话题的任何信息。我访问了W3Schools网站，并尝试使用那里提供的信息

问题是当我使用他们在那里所做的，尝试扩展它，并使它与我自己的标签一起工作时，它根本不起作用！例如，当我在XML文件中有两个标记，并尝试写出它们时，它就工作了。然后我试着再添加一个标签，整个过程就停止了。唯一出现的是一个黑色的小正方形

以下是我的XML代码：

<?xml version="1.0" encoding="UTF-8"?>


<basketballplayers>
<player>
  <name>Steve Nash</name>
  <college>Santa Clara</college>
  <team>La Lakers</team>
</player>
<player>
  <name>Ricky Rubio</name>
  <college>Did not attend</college>
  <team>Minnesota Timberwolves</team>
</player>
<player>
  <name>Michael Jordan</name>
  <college>North Carolina</college>
  <team>Chicago Bulls</team>
</player>
</basketballplayers>

史蒂夫·纳什
圣克拉拉
洛杉矶湖人队
里基·卢比奥
没有出席
明尼苏达森林狼
迈克尔乔丹
北卡罗来纳州
芝加哥公牛队

这是我的HTML代码，只包含XML内容：

if（window.XMLHttpRequest）{//IE7+、Firefox、Chrome、Opera、Safari的代码
xmlhttp=新的XMLHttpRequest（）；
}
else{//IE6、IE5的代码
xmlhttp=新的ActiveXObject（“Microsoft.xmlhttp”）；
}
open（“GET”，“providing.xml”，false）；
xmlhttp.send（）；
xmlDoc=xmlhttp.responseXML；
文件。填写（“”）；
var x=xmlDoc.getElementsByTagName（“播放器”）；
对于（i=0；i

利用jquery js库

试一试

$.get（“providing.xml”，null，null，“xml”）
.done（函数（xml、textStatus、jqxhr）{
$（“正文”）。追加（“”）；
$（xml）.find（“player*”）.each（函数（i，el）{
$（“#结果”）.append（“+el.textContent+”）
})
})

---

jsfiddle

不要使用

文档。编写
。一旦页面加载，它将清除所有内容！嗯？不会的。无论如何更改您的第一个
文档到
文档。写（“”）@rjdown不会吗？然后解释在这个演示中发生了什么，如果您检查Pureiya的示例，您将看到它是内联的（注意结束div），因此它将写入当前文档。在plnkr示例中，使用setTimeout意味着在文档关闭后使用调用，因此会创建一个新的调用。更多信息请点击这里
            <script>
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
}
else {// code for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET", "proving.xml", false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;

document.write("<table border='1'>");

var x = xmlDoc.getElementsByTagName("player");

for (i = 0; i < x.length; i++) {
    document.write("<tr><td>");
    document.write(x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue);
    document.write("</td><td>");
    document.write(x[i].getElementsByTagName("college")[0].childNodes[0].nodeValue);
    document.write("</td></tr>");
    document.write(x[i].getElementsByTagName("team")[0].childNodes[0].nodeValue);
    document.write("</td></tr>");
}
document.write("</table>");
            </script>

        </div>

$.get("proving.xml", null, null, "xml")
.done(function (xml, textStatus, jqxhr) {
    $("body").append("<table id=result border=1></table>");
    $(xml).find("player *").each(function (i, el) {
        $("#result").append("<tr><td>" + el.textContent + "</td></tr>")
    })
})