Append an Array to an Unordered List

Question

What I'm trying to accomplish with this code is to output the array alphabet as a series of list items into an existing unordered list in the actual markup. I've got the array into list items, but I can't figure out how to tell it to append itself to an existing unordered list <ul id="itemList"></ul>.

var itemsExist = true;
var indexNum = 0;
var unorderedList = document.getElementById('itemList');
var alphabet= new Array("A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z");

function write_letters(){

    for (i = 0; i < alphabet.length; i++ ) {
        document.write('<li>'  + alphabet[indexNum++] + '</li>');
    }

}

if (itemsExist){
    write_letters();
} else {
    document.write("error!");
}

Daniel O'Hara · Accepted Answer · 2013-05-02 09:49:56Z

8

Don't use document.write to do it. You should act like this:

function write_letters(){
    var letters = "";

    for (var i = 0; i < alphabet.length; i++ ) {
        //Also I don't understand the purpose of the indexNum variable.
        //letters += "<li>"  + alphabet[indexNum++] + "</li>";
        letters += "<li>"  + alphabet[i] + "</li>";
    }

    document.getElementById("itemList").innerHTML = letters;
}

More proper way is to use DOM (in case you want full control of what's coming on):

function write_letters(){
    var items = document.getElementById("itemList");

    for (var i = 0; i < alphabet.length; i++ ) {
        var item = document.createElement("li");
        item.innerHTML = alphabet[i];
        items.appendChild(item);
    }

}

edited May 2, 2013 at 9:49

answered Aug 26, 2010 at 15:11

Daniel O'Hara

13.5k3 gold badges48 silver badges70 bronze badges

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

1 Comment

nnash Over a year ago

Thanks, this works perfectly; I'll do some reading on .innerHTML. The purpose of indexNum was a sort of hackish way to increment the index value of the array. Looking at your code its obvious that i was doing it wrong.

Joe D · Accepted Answer · 2010-08-26 15:28:28Z

2

You can use a combination of createElement() and appendChild() to add new HTML elements within another HTML element. The code below should work for you:

<html>

<head>
<title>Script Test</title>
</head>

<body>
    <ul id="itemList"></ul>
</body>

<script>
    var itemsExist = true;
    var indexNum = 0;
    var unorderedList = document.getElementById('itemList');
    var alphabet= new Array("A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z");
    var myElement;

    function write_letters(){

        for (i = 0; i < alphabet.length; i++ ) {
            // Create the <LI> element
            myElement = document.createElement("LI");
            // Add the letter between the <LI> tags
            myElement.innerHTML = alphabet[indexNum++];
            // Append the <LI> to the bottom of the <UL> element
            unorderedList.appendChild(myElement);
        }
    }

    if (itemsExist){
        write_letters();
    } else {
        document.write("error!");
    }
</script>

</html>

Note how the script exists below the body tag. This is important if you want your script to work the way you wrote it. Otherwise document.getElementById('itemList') will not find the 'itemList' ID.

answered Aug 26, 2010 at 15:28

Joe D

3,7282 gold badges21 silver badges14 bronze badges

1 Comment

Eli Grey Over a year ago

If you're going to be using the DOM, you should also use text nodes (myElement.appendChild(document.createTextNode(alphabet[indexNum++]))) instead of innerHTML. Also, for XHTML compatibility, you'd want to use li instead of LI in your createElement call.

Andreas · Accepted Answer · 2010-08-26 17:12:40Z

2

Try to reduce the actions on the DOM as much as possible. Every appendChild on unorderedList forces the browser to re-render the complete page. Use documentFragement for that sort of action.

var frag = document.createDocumentFragment();
for (var i = alphabet.length; i--; ) {
   var li = document.createElement("li");
   li.appendChild(document.createTextNode(alphabet[indexNum++]));
   frag.appendChild(li);
}
unorderedList.appendChild(frag);

So there will be only one DOM action which forces a complete redraw instead of alphabet.length redraws

answered Aug 26, 2010 at 17:12

Andreas

21.9k7 gold badges52 silver badges58 bronze badges

1 Comment

tjklemz Over a year ago

This should be number one. I have never seen or heard of this before.

Collectives™ on Stack Overflow

Append an Array to an Unordered List

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related