html - Adding new list elements to an unordered list with Javascript

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 menting in the Javascript code is sufficient, but feel free to ask me questions if it isn't.

Many thanks for the help :).

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

        }
    }
}

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

Many thanks for the help :).

Share Improve this question edited Sep 19, 2012 at 7:48 skunkfrukt 1,5701 gold badge13 silver badges22 bronze badges asked Sep 19, 2012 at 7:42 Rob 1,2806 gold badges25 silver badges36 bronze badges

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 Commented Mar 17, 2016 at 23:52

Add a ment |

1 Answer 1

Sorted by: Reset to default 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/grc4/gc4X5/1/

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

html - Adding new list elements to an unordered list with Javascript - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)