How to select the second <LI> element using javascript?

Question

Using JavaScript, how can I dynamically change one of the following elements below:

<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 think you could use getElementsByTagName inside ul to get all list items inside an array. Then you can simply 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>";

This will cause all ul elements to be displayed on the page and may lead to some strange results if there are more than two uls in your document. But you get it, right? Just ask again if you don't understand what I'm trying to say.

, . , HTML, , ul "tabbernav", class="tabbernav" id="tabbernav". , .

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

, :)

Answer 2

jQuery, . : eq psuedo-selector :

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

DOM, li ( 0) tabbernav. jQuery, . HTML .html('Your html here').

Answer 3

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

Answer 4

, <li> , ?

, - , :

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

Answer 5

, , , , . , - .

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

, , , , [0]. , , getElementsByTagName (NAME) html NAME. , , , .

, . , . , childNode, .

>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 6

Li Ul JavaScript.

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

"" .

Answer 7

Take a look at using a Javascript library such as jQuery. It will make your life much easier. Then you can do something like this:

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

You will need to check my syntax (not sure about the function text()), but it's easy enough to find it in jQuery api docs.