rondog Posted April 7, 2009 Share Posted 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> Link to comment https://forums.phpfreaks.com/topic/153063-writing-html-with-javascript/ Share on other sites More sharing options...
xtopolis Posted April 8, 2009 Share Posted 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] Link to comment https://forums.phpfreaks.com/topic/153063-writing-html-with-javascript/#findComment-804123 Share on other sites More sharing options...
Axeia Posted April 8, 2009 Share Posted 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. Link to comment https://forums.phpfreaks.com/topic/153063-writing-html-with-javascript/#findComment-804476 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.