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

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 2

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').

Answer 3

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

this will work perfect

Answer 4

I know that this question is old but since it's still open, see how I modified the first answer. I feel someone else might need it.

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

So that basically solves it up by specifying the position of the lItems in particular to grab and in this case [0]. The code will not work properly if that position is missing because getElementsByTagName(NAME) returns a collection of html elements bearing that NAME specified. So that if you don't specify which among them all, the code fails.

If you like code reuse, see a function you can use for that. You just need to specify the parent element and its position and the childNode position and you get the same thing.

>var nthChild = function(parent, pos, childPos){
>>parent = document.getElementsByTagName(parent)[pos];
>>>return parent.children[childPos];
>>>>};
//used thus:
>nthChild("ul", 0, 2).innerHTML = "<a title='Two'>----NEW LIST ITEM CHANGED-----> </a>

---

";

Answer 5

This is how you select the third Li element of your Ul list in pure JavaScript.

document.querySelectorAll("li")[2].innerHTML = "vasile";

Replace "Vasile" with your desired text.

Answer 6

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 7

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.