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.

The only thing you haven't done is to insert the ul into the sideMenu div. — lonesomeday
– lonesomeday, Commented Dec 3, 2016 at 17:58

2 revs · Accepted Answer · 2016-12-03 18:01:16Z

1

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

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);
```
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>

edited Dec 3, 2016 at 18:01

community wiki

2 revs
T.J. Crowder

Sign up to request clarification or add additional context in comments.

2 Comments

user5641575 Over a year ago

return unorderedList; x.appendChild(makeUL(sideList[0])); } Like that?

T.J. Crowder Over a year ago

@JoeG: No, return exits the function immediately, so statements after it don't get run. Either append it before the return, or do it outside the function using the return value of the function. Note: I added a live example above (and found a second error while doing so).

caxco93 · Accepted Answer · 2016-12-03 18:01:45Z

1

you are only missing

x.appendChild(unorderedList);

before the return unorderedList;.

answered Dec 3, 2016 at 18:01

caxco93

335 bronze badges

Comments

jafarbtech · Accepted Answer · 2016-12-03 18:09:01Z

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>

Collectives™ on Stack Overflow

Creating an unordered list through javascript

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related