Writing HTML with javascript

programming web dev
1

I am looping through an XML file and need to loop and create list of thumbnails with some text. How can I write a div and output it depending on how many nodes are in the XML? If I use document.write it erases anything static that I would have had like navigation, images etc. Here is a sample doc that is using just document.write


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
var xmlDoc;
function parseXML()
{
	try //Internet Explorer
		{
		xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
		}
	catch(e)
		{
	try //Firefox, Mozilla, Opera, etc.
		{
		xmlDoc = document.implementation.createDocument("","",null);
		}
		catch(e)
		{
	alert(e.message);
	return;
		}
	}
	xmlDoc.async = false;
	xmlDoc.load("test.xml");
	var courses = xmlDoc.getElementsByTagName("courses")[0].getElementsByTagName("course");
	for (var i = 0; i < courses.length; i++)
	{
		var course 		= courses*;
		var courseID 	= course.getElementsByTagName("id")[0].firstChild.nodeValue;
		var name 		= course.getElementsByTagName("name")[0].firstChild.nodeValue;
		var description = course.getElementsByTagName("description")[0].firstChild.nodeValue;
		var status 		= course.getElementsByTagName("status")[0].firstChild.nodeValue;
		//var lessonData	= course.getElementsByTagName("lesson_data")[0].firstChild.nodeValue;
		var thumb 		= course.getElementsByTagName("thumb")[0].firstChild.nodeValue;
		var length 		= course.getElementsByTagName("length")[0].firstChild.nodeValue;
		var url 		= course.getElementsByTagName("url")[0].firstChild.nodeValue;
		document.write("CourseID: " + courseID + " <br />");
		document.write("Name: " + name + " <br />");
		document.write("Status: " + status + " <br />");
		document.write("Length: " + length + " <br />");
		document.write("URL: " + url + " <br />");
		document.write("Thumb: " + thumb + " <br />");
		document.write("============= <br /><br /><br />");
	}
}
</script>
</head>
<body onload="parseXML();">
</body>
</html>