I'm currently learning javascript and I'm attempting to create divs based on an xml file.
XML File - I realize the info is not correct(years).
<?xml version="1.0" encoding="UTF-8"?>
<Movies>
<Movie>
<Title>Independence Day</Title>
<Year>2003</Year>
<Rating>75</Rating>
</Movie>
<Movie>
<Title>GroundHog Day</Title>
<Year>1998</Year>
<Rating>80</Rating>
</Movie>
</Movies>
I'm then trying to produce an html file where I can format the divs with css.
html with JS
<html>
<style type="text/css">
p {
font-size: 14px;
}
div {
border: 1px black solid;
width: 100px;
height: 100px;
position: relative;
float: left;
}
</style>
<body>
<script>
xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET","movies.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
var x=xmlDoc.getElementsByTagName("Movie");
for (i=0;i<x.length;i++)
{
document.write("<div><p>");
document.write(x[i].getElementsByTagName("Title")[0].childNodes[0].nodeValue);
document.write("</p><p>");
document.write(x[i].getElementsByTagName("Year")[0].childNodes[0].nodeValue);
document.write("</p><p>");
document.write(x[i].getElementsByTagName("Rating")[0].childNodes[0].nodeValue);
document.write("</p></div");
}
</script>
</body>
</html>
I'm getting data back, but I'm only producing one div with the data spilling out the bottom. Why isn't this producing two divs - 1 per movie?