Adding new list elements to an unordered list with Javascript

Question

I am trying to add new elements to an unordered list with the following code:

The HTML:

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Javascript</title>
<link rel="stylesheet" href="jsPlay.css" type="text/css" />
<script src="jsPlay.js"></script>
</head>

<body>

<ul id="numberList"></ul>

</body>
</html>

The Javascript:

window.onload = function()
{
    //alert("Window is loaded");

    var numberList = document.getElementById("numberList");


    //for every number between 100 and 200      
    for(var i = 0; i > 100 && i < 200; i++)
    {
        if ( i % 17 == 0 && i % 2 == 0) //if number evenly divisible by 17 and 2
        {
                    //create new li element
            var newNumberListItem = document.createElement("li");

                    //create new text node
            var numberListValue = document.createTextNode(i);

                    //add text node to li element
            newNumberListItem.appendChild(numberListValue);

                    //add new list element built in previous steps to unordered list
                    //called numberList
            numberList.appendChild(newNumberListItem);

        }
    }
}

When I run this in my browser, I just get nothing but white-space. I check in FireBug (on Firefox 15.0.1) to see if there are any errors, but there is nothing noticeable. I think I am not binding something together properly - it seems like such a basic problem but I can't seem to fgure out why the elements aren't being added to the unordered list.

I'm sure the commenting in the Javascript code is sufficient, but feel free to ask me questions if it isn't.

Many thanks for the help :).

You have some performance issue here. You should use "var dc = document.createDocumentFragment()" and after adding all list elements to your "dc" you should append html fragment to your list in one go. — DevWL
– DevWL, Commented Mar 17, 2016 at 23:52

grc · Accepted Answer · 2012-09-19 07:46:39Z

9

Your for loop immediately fails because i is not greater than 100. If you try something like this it should work:

for (var i = 100; i < 200; i++)

Example: http://jsfiddle.net/grc4/gc4X5/1/

answered Sep 19, 2012 at 7:46

grc

23.7k5 gold badges45 silver badges63 bronze badges

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

Collectives™ on Stack Overflow

Adding new list elements to an unordered list with Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related