我正在尝试将 API 生成的 XML 文件与(当前)静态网页连接起来，该网页可以在 oliverpwilson.github.io/tubular 找到。 。我有一个 HTML 文件，其结构大致如下:
<div>
<span id="content">No Content Yet</span>
</div>
以及<header>中的一些Javascript确定 <span> 中的内容:
<script>
function myFunction() {
document.getElementById("content").innerHTML = "Some Content Now!";
</script>
和<body onload="myFunction">所以它会在加载时触发。
这一切都有效。
我想要做的是使用由 API(准确地说是伦敦交通 API)生成的外部 XML 文件，该文件托管在 URI http://cloud.tfl.gov.uk/TrackerNet/LineStatus 上。 ，使用 javascript 解析它的信息，并使用该信息来更新我的内容
document.getElementById("content").innerHTML = "Some Content Now!";
显示在引号内，即替换“Some Content Now!” XML 文件生成的任何内容都存在于某个标记内，例如 <Status Description="Good Service"> ，其中“现在有一些内容!”将被“良好的服务”取代。
我希望这具有广泛意义。我不知道如何解决这个问题，因此我们将不胜感激。
最佳答案
我已经查看了您发布的内容。在那里你有这样的元素，这些元素具有以下结构:
div xxx-line
|--- div details
|--- div status
|--- div details
有了这些，您可以选择直接在 JavaScript 中找到您想要的内容。 您可以通过“状态”或“详细信息”中的 id 调用它，或者您可以浏览“div xxx-line”类，随意。
您可以使用以下代码读取 xml:
if (window.DOMParser)
{
parser=new DOMParser();
xmlDoc=parser.parseFromString(txt,"text/xml");
}
else // Internet Explorer
{
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async=false;
xmlDoc.loadXML(txt);
}
这样，您就可以从节点获取信息:
//Get status
var status = xmlDoc.getElementsByTagName("status")[0].childNodes[0].nodeValue;
//Get details
var details = xmlDoc.getElementsByTagName("status")[0].childNodes[0].nodeValue;
使用变量状态或详细信息，您可以替换 div 的内容
关于javascript - 使用 JavaScript 将 HTML 内容替换为外部 XML 文件中的内容？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27091948/