# Writing HTML with javascript

**URL:** <https://forum.kirupa.com/t/writing-html-with-javascript/285931>\
**Category:** web dev\
**Created:** [April 7, 2009, 9:42pm UTC](https://forum.kirupa.com/t/writing-html-with-javascript/285931 "2009-04-07T21:42:41Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![rondog](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/rondog/32/2478_2.png) [@rondog](https://forum.kirupa.com/u/rondog)\
**Post date:** [April 7, 2009, 9:42pm UTC](https://forum.kirupa.com/t/writing-html-with-javascript/285931/1 "2009-04-07T21:42:41Z")

</div>

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

```auto

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

```
