week3/05dom/create_dom_dynamic.html

<!DOCTYPE HTML>
<html>
	<head>
		<title>Create DOM elements dynamically</title>
		
		<script>
		/* 
		---------------
		  try the jsfiddle version: http://jsfiddle.net/rover/5pw0bumx/
		--------------- 
		*/

		// wait for the DOM to load before you try to access it
		document.addEventListener("DOMContentLoaded", function(event) {
			// array of names
			var students = [
			    "Ainsley",
			    "Ashley",
			    "Caroline",
			    "Chrisanthy",
			    "Clare",
			    "Dinos",
			    "Hochien",
			    "Jaclyn",
			    "Jie",
			    "Jie",
			    "Julian",
			    "Pierre",
			    "Sisa",
			    "Tanya",
			    "Yang"
			    ];
			// get the <ul> unordered list element
			var studentUl = document.getElementById("student_list");

			// loop through the names
			for (var i=0; i < students.length; i++){ 
			    // create <li> list item
			    var myLi = document.createElement("li");  
			    // put the name text inside the <li>
			    myLi.innerHTML = students[i];
			    // attach to the end of <ul>
			    studentUl.appendChild(myLi);
			    
			}
		});

		</script>
	</head>
	<body>
		<h1>Class list</h1>
		<ul id="student_list"></ul>
	</body>
</html>