Using addChild() - Exercise

Contact Us or call 1-877-932-8228
Using addChild() - Exercise

Using addChild()

Duration: 10 to 15 minutes.

In this exercise, you will modify the XML.html file we saw earlier to use our new addChild() function, which is in the already included lib.js file.

  1. Open PassingData/Exercises/XML.html in your editor.
  2. Navigate to PassingData/Exercises/ from the command line and type npm install to install the needed Node.js modules.
  3. Type npm start from the command line to start the Node.js server.
  4. Wherever you see an opportunity, modify the code to use the addChild() function.
  5. Open http://localhost:8080/XML.html in your browser to test your solution.

Solution:

PassingData/Solutions/XML.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>XML</title>
<link href="xml.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="lib.js"></script>
<script type="text/javascript">
	function init() {
		var btnLoad = document.getElementById("btnLoad");
		observeEvent(btnLoad, "click", loadXml);
	}

	function loadXml() {
		var btnDisplay = document.getElementById("btnDisplay");
		var output = document.getElementById("output");
		var xmlhttp = new XMLHttpRequest();
		var xmlDoc;

		xmlhttp.open("GET", "Beatles.xml", true);
		xmlhttp.onreadystatechange = function() {
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
				output.innerHTML = "XML Loaded";
				xmlDoc = xmlhttp.responseXML;
			}
		}
		xmlhttp.send(null);

		observeEvent(btnDisplay, "click", function() {
			var btnClear = document.getElementById("btnClear");
			addNodes(xmlDoc.documentElement);
			observeEvent(btnClear, "click", clearXml);
		});
	}

	function addNodes(node, parent) {
		var output = document.getElementById("output");
		var child, cls;
		var list, listitem, sublist;

		if (!parent) {
			output.innerHTML = "";
			,list = addChild(document, output, "ol");,
		} else {
			list = parent;
		}

		for (var i = 0; i < node.childNodes.length; i++) {
			child = node.childNodes[i];
			cls = (child.nodeType == 3) ? "textnode" : "nontextnode";

			,listitem = addChild(document, list, "li", child.nodeName + ": " + child.nodeValue);,
			listitem.className = cls;

			if (child.hasChildNodes()) {
				sublist = addChild(document, listitem, "ol");
				addNodes(child, sublist);
			}
		}

		if (node.nodeType == 1) { //Element Node
			for (var i = 0; i < node.attributes.length; i++) {
				listitem = addChild(document, list, "li", node.attributes[i].nodeName + ": " + node.attributes[i].nodeValue);
				listitem.className = "attribute";
			}
		}
	}

	function clearXml() {
		document.getElementById("output").innerHTML = "XML Cleared";
	}

	observeEvent(window, "load", init);
</script>
---- C O D E   O M I T T E D ----

Start the Node.js server from the PassingData/Solutions/ directory to view our solution: from the command line, type npm install to install the needed Node.js modules, then type npm start. Then open http://localhost:8080/XML.html in your browser.

The init function, invoked when the page loads, adds a click listened on the "Load XML" button; clicking the button invokes the loadXml function.

The loadXml function makes an Ajax call to Beatles.xml - if the call is successful, then a message ("XML Loaded") is displayed, the received XML is stored in variable xmlDoc, and a click listener is added to the "Display XML" button.

Clicking the "Display XML" button invokes function addNodes, passing along the received XML data; addNodes iterates over the XML and displays in the div with id output.

Next