如何使用javascript将xml数据加载到某些段落元素中

我有一个单独的xml文档，名为videoCatalog.xml

我想抓住这个机会；标题、作者、相机、日期、位置、经度和纬度，并将其放入相关元素中

这些是我想将xml数据放入的html元素，它们都有id：

<h3 id="hTitle"></h3>
<p id="pAuther"></p>
<p id="pCamera"></p>
<p id="pDate"></p>
<p id="pLocation"></p>
<p id="pLongitude"></p>
<p id="pLatitude"></p>

这是我的xml文档：

<videoDetails>
<Video>
    <Title>Surfing with Sunny Garcia and Kalani Robb</Title>
    <Auther>Sunny Garcia and Kalani Robb</Auther>
    <Camera>GoPro Hero-1080p HD</Camera>
    <Date>2010</Date>
    <Location>On the Pipeline, Honolulu, Hawaii, USA</Location>
    <Longitude>21.284096</Longitude>
    <Latitude>-157.856162</Latitude>
</Video>
<Video>
    <Title>Brian Lopes downhill</Title>
    <Auther>Brian Lopes</Auther>
    <Camera>GoPro Hero-960p HD</Camera>
    <Date>2011</Date>
    <Location>Crankworks in Blackcomb, Whistler, Canada</Location>
    <Longitude>50.115486</Longitude>
    <Latitude>-122.947594</Latitude>
</Video>
<Video>
    <Title>Boat Racing Crash</Title>
    <Auther>Gavin Hurst</Auther>
    <Camera>GoPro Hero-720p HD</Camera>
    <Date>2009</Date>
    <Location>Lake Macfarlane, Yardea, Australia</Location>
    <Longitude>-32.127942</Longitude>
    <Latitude>136.76857</Latitude>
</Video>
</videoDetails>

和Sunny Garcia和Kalani Robb一起冲浪
Sunny Garcia和Kalani Robb
GoPro Hero-1080p高清
2010
在美国夏威夷火奴鲁鲁的管道上
21.284096
-157.856162
布莱恩·洛普斯下山
布莱恩·洛佩斯
GoPro Hero-960p高清
2011
Crankworks位于加拿大惠斯勒的布莱克科姆
50.115486
-122.947594
赛艇碰撞
加文·赫斯特
GoPro Hero-720p高清
2009
澳大利亚亚尔达麦克法兰湖
-32.127942
136.76857

您希望它看起来怎么样？像XML或XLST一样？最好使用jQuery。以下是一些有帮助的问题：