How do I put unordered list items into an array

Question

My code is...

How do I get the text in each list item into an array using native javascript?

<ul id="list">
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
    <li>List Item 4</li>
</ul>

<script type="text/javascript">
var list = document.getElementById('list').childNodes.TextNode;
for(var i=0;i < list.length; i++) {
    var arrValue = list[i];
    alert(arrValue);
}
</script>

Many thanks.

Answer 1

Unless you want the text-nodes between each <li> it's not a good idea to use childNodes. What's wrong with getElementsByTagName('li')?

var listItems = document.getElementById('list').getElementsByTagName('li'),

    myArray = map(listItems, getText);

function map(arrayLike, fn) {
    var ret = [], i = -1, len = arrayLike.length;
    while (++i < len) ret[i] = fn(arrayLike[i]);
    return ret;
}

function getText(node) {
    if (node.nodeType === 3) return node.data;
    var txt = '';
    if (node = node.firstChild) do {
        txt += getText(node);
    } while (node = node.nextSibling);
    return txt;
}

Answer 2

Try this:

var list = document.getElementById('list').childNodes;
var theArray = [];
for(var i=0;i < list.length; i++) {
    var arrValue = list[i].innerHTML;
    alert(arrValue);
    theArray.push(arrValue);
}

Answer 3

var LIs = document.getElementById('list').childNodes;
var list = [];
for( var i = 0; i < LIs.length; ++i )
{
    var LI = LIs[i];
    list.push(LI.innerText || LI.textContent);
}

And as always, the simpler way using jQuery:

var list = $('#list li').map(function(){ return $(this).text(); });

Answer 4

Just about any Javascript library (Prototype, jQuery, Closure, ...) will make this easier, but if you want to do it yourself:

You're close, your Javascript should look something like this:

window.onload = onPageLoad; // Or any of several other similar mechanisms
                            // (you could just run it at the bottom of the page)
function onPageLoad() {
    var node, list, arrValue;

    list = [];
    for (node = document.getElementById('list').firstChild;
        node;
        node = node.nextSibling) {
        if (node.nodeType == 1 && node.tagName == 'LI') {
            list.push(node.innerHTML);
        }
    }

    // `list` now contains the HTML of each LI element under the `ul#list` element
}

Explanation:

• Before using document.getElementById, you need to be sure that the DOM is ready for you to do that. It's definitely ready at onload time, and there are various mechanisms for triggering your code a bit earlier than that if you like (including putting the script right at the end).
• The loop starts by getting the ul#list element's first child, then continues as long as there are further siblings.
• In the loop, we check that each node is an Element (nodeType == 1) and that its tag name is "LI".
• If it is, we retrieve its HTML and push it on the array.

I've used innerHTML to retrieve the content of the LIs because it's widely supported. Alternately, you could use innerText on IE (and some others) and textContent on Firefox, but beware that they don't do quite the same thing (textContent on Firefox will include the contents of script tags, for instance, which probably isn't what you want).

Answer 5

var list = document.getElementsByTagName('ul')[0].getElementsByTagName('li');

var theArray = [];

for (var i = 0; i < list.length; i++) {
    var arrValue = list[i].innerHTML;
    console.log(arrValue);
    theArray.push(arrValue);
}