Creating an unordered list through javascript

Question

I have created a div using javascript in another function and I have styled it in the function I am about to show (this is all working) I am attempting to fill the div with an unordered list, this is what I have so far:

function LeftSideMenu() {
// getting the javascript named div
var x = document.getElementById("sideMenu");

// Styling the div
x.style.width = "300px";
x.style.height = "750px";
x.style.position = "absolute";
x.style.padding = "0px 0px 0px 0px";
x.style.border = "thick solid #901709";
x.style.borderWidth = "10px";
x.style.background = "#c01e0c";

var sideList = ['About', 'Players', 'Achievements']
var unorderedList = document.createElement('ul');

for (var i = 0; i < sideList.Length; i++) {

    // Create a new 'LI' element for each part of the sideList array
    var theList = document.createElement('li');

    // Set the contents of the list seen in "sideList"
    theList.appendChild(document.createTextNode(sideList[i]));

    // Appened the list to the unorderedList
    unorderedList.appendChild(theList);
}

// Return the occupied list
return unorderedList;
}

So the question is, how do I fill the list with the 'sideList' contents and put that list into my 'sideMenu' (AKA var = x) div. I would also like to avoid JQuery if possible.

Answer 1

You've done almost all of it right, except that:

1. You need to append unorderedList somewhere in the DOM for it to show up on the page. If you wnt it to be in sideMenu , then at the end:

    x.appendChild(unorderedList); 

2. You've used sideList.Length instead of sideList.length (lower case l on length ). Case matters in JavaScript.

Example:

 function LeftSideMenu() { // getting the javascript named div var x = document.getElementById("sideMenu"); // Styling the div x.style.width = "300px"; x.style.height = "750px"; x.style.position = "absolute"; x.style.padding = "0px 0px 0px 0px"; x.style.border = "thick solid #901709"; x.style.borderWidth = "10px"; x.style.background = "#c01e0c"; var sideList = ['About', 'Players', 'Achievements'] var unorderedList = document.createElement('ul'); for (var i = 0; i < sideList.length; i++) { // Create a new 'LI' element for each part of the sideList array var theList = document.createElement('li'); // Set the contents of the list seen in "sideList" theList.appendChild(document.createTextNode(sideList[i])); // Appened the list to the unorderedList unorderedList.appendChild(theList); } // Append the list to the menu div *** x.appendChild(unorderedList); // *** // Return the occupied list return unorderedList; } LeftSideMenu(); 

 <div id="sideMenu"></div> 

Answer 2

you are only missing

x.appendChild(unorderedList);

before the return unorderedList; .

Answer 3

add x.appendChild(unorderedList); and in sideList.Length l should be small case

 function LeftSideMenu() { // getting the javascript named div var x = document.getElementById("sideMenu"); // Styling the div x.style.width = "300px"; x.style.height = "750px"; x.style.position = "absolute"; x.style.padding = "0px 0px 0px 0px"; x.style.border = "thick solid #901709"; x.style.borderWidth = "10px"; x.style.background = "#c01e0c"; var sideList = ['About', 'Players', 'Achievements']; var unorderedList = document.createElement('ul'); for (var i = 0; i < sideList.length; i++) { // Create a new 'LI' element for each part of the sideList array var theList = document.createElement('li'); // Set the contents of the list seen in "sideList" theList.appendChild(document.createTextNode(sideList[i])); // Appened the list to the unorderedList unorderedList.appendChild(theList); } // Return the occupied list x.appendChild(unorderedList); return; } window.onload=function(){ LeftSideMenu(); } 

 <div id="sideMenu"></div>