Jump to content

Writing HTML with javascript


rondog

Recommended Posts

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>

Link to comment
https://forums.phpfreaks.com/topic/153063-writing-html-with-javascript/
Share on other sites

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.

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.