Writing HTML with javascript

rondog · April 7, 2009

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[i];
	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>

xtopolis · April 8, 2009

Easy way: change the .innerHTML on an existing element.

Pro/hard way: Create new elements/nodes and append/manipulate. (createElement type) [small example: http://www.adp-gmbh.ch/web/js/elements/createelement.html]

Axeia · April 8, 2009

I'd also advice to put the standard way INFRONT of the non standard way in the parseXML function.

If Microsoft actually implements the proper way to do it your script will still be using the non standard way.

think this would work if you put it in your code instead of the document.write

document.appendChild( document.createTextNode( "CourseID: " + courseID ) );
document.appendChild( document.createElement( 'br' ) );

document.appendChild( document.createTextNode( "Name: " + name ) );
document.appendChild( document.createElement( 'br' ) );

document.appendChild( document.createTextNode( "Status: " + status ) );
document.appendChild( document.createElement( 'br' ) );

document.appendChild( document.createTextNode( "Length: " + length ) );
document.appendChild( document.createElement( 'br' ) );

document.appendChild( document.createTextNode( "URL: " + url ) );
document.appendChild( document.createElement( 'br' ) );

document.appendChild( document.createTextNode( "Thumb: " + thumb ) );
document.appendChild( document.createElement( 'br' ) );

document.appendChild( document.createTextNode( '=============' ) );


document.appendChild( document.createElement( 'br' ) );
document.appendChild( document.createElement( 'br' ) );
document.appendChild( document.createElement( 'br' ) );

Of course you could also simply make a function to shorten the code..

function addLine( txt )
{
    document.appendChild( document.createTextNode( txt );
    document.appendChild( document.createElement( 'br' ) );
}

Making it a bit more readable.

Sign In

Writing HTML with javascript

Recommended Posts

rondog

Link to comment

Share on other sites

xtopolis

Link to comment

Share on other sites

Axeia

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information