ansaurus

Question

[Javascript] Append an Array to an Unordered List

Answer 1

+2 A:

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

floatless 2010-08-26 15:11:34

Thank you, Daniel.

floatless 2010-08-26 15:41:32

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.

nnash 2010-08-26 15:47:07

Answer 2

+1 A:

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.

Joe D 2010-08-26 15:28:28

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.

Eli Grey 2010-08-26 16:55:07

Answer 3

A:

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

john_doe 2010-08-26 17:12:40

ansaurus

tags:

views:

answers:

[Javascript] Append an Array to an Unordered List

related questions