javascript - 将 XML 内容提取到 HTML 中

Question

我是 HTML/JS 的新手，所以我希望各位专家能帮我解决一个小问题。我有带有播放列表的 html5 音乐播放器，其内容当前在 index.html 文件中提到，如下所示:

<div id="divListing">
    <ol id="olContents">
<li rel="http://www.abc.mp3"><strong>Song1</strong><a target="_blank" href=" ">Buy Song</a><em>Artist1</em></li>
<li rel="http://www.abcd.mp3"><strong>Song2</strong><a target="_blank" href=" ">Buy Song< /a><em>Artist2</em></li>
<li rel="http://www.abcde.mp3"><strong>Song3</strong><a target="_blank" href=" ">Buy Song</a><em>Artist1</em></li>
<li rel="http://www.abcdef.mp3"><strong>Song4</strong><a target="_blank" href=" ">Buy Song</a><em>Artist2</em></li>
    </ol>
</div>

我的目标是获得<li> XML 文件中的项目，这样我就不必每次都更新 html 文件，而是如果我更改外部(类似于 dropbox)source.XML 文件上的字符串，则使用相同的语法进行维护，如下所示:

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

<data>               
<li rel="http://www.abc.mp3"><strong>Song1</strong><a target="_blank" href=" ">Buy Song</a><em>Artist1</em></li>
<li rel="http://www.abcd.mp3"><strong>Song2</strong><a target="_blank" href=" ">Buy Song</a><em>Artist2</em></li>
<li rel="http://www.abcde.mp3"><strong>Song3</strong><a target="_blank" href=" ">Buy Song</a><em>Artist1</em></li>
<li rel="http://www.abcdef.mp3"><strong>Song4</strong><a target="_blank" href=" ">Buy Song</a><em>Artist2</em></li>

</data>

我不知道如何关联或调用 XML 文件，以便 html 可以读取它们，就像直接在 html 中调用它们一样。

您可以分享的任何代码帮助将不胜感激。

谢谢!

Answer 1

无需拼写出所有代码，我将使用 AJAX 来发出对 XML 文件的请求。然后，一旦收到该数据，您就可以使用 javascript/jQuery 将该 HTML 插入到您的列表中。