<div id="seasonslist1"><p><button onclick="makeSeasonsList(); return false;" type="submit">Click to append list of seasons</button></p>
</div>
In
script
element within head
element (<script type="text/javascript">
):
function makeSeasonsList() {
var ul_node = document.createElement("ul");
// Autumn
var li_node1 = document.createElement("li");
var li_text1 = document.createTextNode("Autumn");
li_node1.appendChild(li_text1);
// Winter
var li_node2 = document.createElement("li");
var li_text2 = document.createTextNode("Winter");
li_node2.appendChild(li_text2);
// Spring
var li_node3 = document.createElement("li");
var li_text3 = document.createTextNode("Spring");
li_node3.appendChild(li_text3);
// Summer
var li_node4 = document.createElement("li");
var li_text4 = document.createTextNode("Summer");
li_node4.appendChild(li_text4);
// Append the list items to the ul
ul_node.appendChild(li_node1);
ul_node.appendChild(li_node2);
ul_node.appendChild(li_node3);
ul_node.appendChild(li_node4);
// Place on page
var container = document.getElementById("seasonslist1");
container.appendChild(ul_node);
}
Copyright © David Heitmeyer