Как загрузить данные XML в некоторые элементы абзаца, используя JavaScript

Question

У меня есть отдельный XML-документ с именем videoCatalog.xml

Я хочу взять;Название, автор, камера, дата, местоположение, долгота и широта и поместите их в соответствующие элементы

Это HTML-элементы, в которые я хочу поместить данные XML, все они имеют идентификаторы:

<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>