how to select 2nd <LI> element using javascript?

Question

Using JavaScript, how can I dynamically change one of the list-items below from this:

<ul class="tabbernav">
<li class="tabberactive"><a title="All">All</a></li>
<li class=""><a title="One">One</a></li>
<li class=""><a title="Two">Two</a></li>
<li class=""><a title="Three">Three</a></li>
</ul>

to

<ul class="tabbernav">
<li class="tabberactive"><a title="All">All</a></li>
<li class=""><a title="One">One</a></li>
<li class=""><a title="Two">-----------NEW LIST ITEM CHANGED---------</a></li>
<li class=""><a title="Three">Three</a></li>
</ul>

Answer 1

Look into using a Javascript library such as JQuery. That will make your life a lot easier. Then you can do something like this:

$('li a[title=Two]').text('Changed Text Goes Here');

You'll need to check my syntax (not sure about the text() function), but it's easy enough to look up in JQuery's api docs.

Answer 2

How do you identify which <li> is the one you want to modify?

If you're doing it by index you could do something like this I think:

var list = document.getElementById("listid");
list.childNodes[2].innerHtml = "<a title='Two'>-----------NEW LIST ITEM CHANGED---------</a>";

Answer 3

I guess you could use getElementsByTagName inside of the ul to get all your list items inside an array. Then you can just edit the third element in your array, with index number 2.

var lItems = document.getElementsByTagName("ul").getElementsByTagName("li");
lItems[2].innerHTML = "<a title='Two'>----NEW LIST ITEM CHANGED-----</a>";

That will ofcourse get all ul elements on the page, and might lead to some strange results if you have more than two uls in your document. But you get the idea, right? Just ask some more if you don't understand what I'm trying to say.

Okay, the above code doesn't really work properly. I've modified my code a bit, but that also included a change in your HTML, as i presume you'll only have one ul "tabbernav", thus I changed it from class="tabbernav" to id="tabbernav". This is the code to do what you want.

var ul = document.getElementById("tabbernav");
var liArray = ul.getElementsByTagName("li");

for (var i = 0; i < liArray.length; i++) {
    if(liArray[i].childNodes[0].title == "Two") {
        liArray[i].innerHTML = "Your desired output";
    }
}

Hope that helps you some more :)

Answer 4

I also suggest using jQuery, which makes selections like this trivial. In your case, you can use the :eq psuedo-selector to get the second line element:

$('.tabbernav li:eq(1)')

This selects the DOM element which is the second li (indexes start at 0) in an element with the class tabbernav. It returns a jQuery object which you can chain other methods to. Changing the inner HTML is done with .html('Your html here').