append child list item in ordered list through javascript

Question

Is there a way to append the child node in an ordered way in javascript? I have this code here to create and ordered list and add list items in it but its not putting them in an ordered form.

var listContainer = document.getElementById("content1");
var listElement = document.createElement("ol");
listContainer.appendChild(listElement);

for(i = 0; i < arr.length; i++) {

    var listItem = document.createElement("li");
    listItem.innerHTML = arr[i].color + " " + arr[i].value +"</br>";
    listElement.appendChild(listItem);

}

Hard to know what you are expecting, vs what you are getting if you don't tell us. — Seano666, Oct 29 '15 at 20:48
Do you mean that the output is not styled as an ordered list? — joews, Oct 29 '15 at 20:57
My output is: 1.red #f00 2.green #0f0 3.blue #00f 4.cyan #0ff 5.magenta #f0f As you can see blue should come before green but it isn't. — Tsaleem, Oct 29 '15 at 21:16
It's coming out as an ordered list in this [fiddle](http://jsfiddle.net/ajgj7hLj/). Do you want it sorted? — mcon, Oct 29 '15 at 21:27
The elements are added in the same order as your array of colours. If you want a different order you should sort the array first. — joews, Oct 30 '15 at 08:17

score 1 · Answer 1 · edited May 23 '17 at 11:51

I'm assuming that you want the items listed in order of the 'value' property in the array (as you mentioned 'blue' should be before 'green'.

If so, you need to sort the array on the appropriate property before iterating through for the output.

Using this method, you can add more items to the array as needed - just call the sort routine before updating the output...

I have updated your code (and that provided in @mcon's fiddle), and added the sort comparer.

Credit to @Wogan for the simple example of the sort function here: https://stackoverflow.com/a/1129270/4619012

<div id="content1"></div>

    <script type="text/javascript">
        var listContainer = document.getElementById("content1");
        var listElement = document.createElement("ol");
        listContainer.appendChild(listElement);

        var arr = [
            { color: 'red', value: '#f00' },
            { color: 'green', value: '#0f0' },
            { color: 'blue', value: '#00f' },
            { color: 'cyan', value: '#0ff' },
            { color: 'magenta', value: '#f0f' }
        ]

        function compareValue(a, b) {
            if (a.value < b.value)
                return -1;
            if (a.value > b.value)
                return 1;
            return 0;
        }

        arr.sort(compareValue);

        for (i = 0; i < arr.length; i++) {
            var listItem = document.createElement("li");
            listItem.innerHTML = arr[i].color + " " + arr[i].value + "</br>";
            listElement.appendChild(listItem);
        }
    </script>

append child list item in ordered list through javascript

1 Answers1