CODEWITHSUNDEEP
javascriptlisttexthtml-lists
Erdem Güngör
Erdem Güngör

Reputation: 877

How to get Value / Text of a List item Javascript

how can i get the Value / Text of a <li> item ? I found on the internet much ways to get the value for a dropdown list. But not for a <li> item.

This is what I have tried so far:

var listt = document.getElementById('content1'); 
var selectedvalue = [listt.selectedIndex].text;

Upvotes: 5

Views: 74389

Answers (4)

Vatsal A Mehta
Vatsal A Mehta

Reputation: 430

You could also try using the textContent property perhaps or innerHTML for that matter if you wanna get plain text.

var li_item=document.getElementById('content1');
console.log(li_item.textContent)

Upvotes: 0

Ninthony
Ninthony

Reputation: 41

I would just use innerHTML if your list item has an ID or class name and assuming there is no other html in your list item. 

<ul>
 <li class="list-item">Item1</li>
 <li class="list-item">Item2</li>
 <li class="list-item">Item3</li>
</ul>
<script>
var list = document.getElementsByClassName('list-item');
var listArray=[];
for (var i=0;i<list.length;i++){
listArray.push(list[i].innerHTML);
console.log(listArray[i]);
}
</script>
//output
Item1
Item2
Item3

Upvotes: 2

CodingIntrigue
CodingIntrigue

Reputation: 78545

You can use the innerText property for most browsers, but the textContent property for Firefox:

<ul>
    <li id="myLi">Hello, world</li>
</ul>

var li = document.getElementById("myLi")
console.log(li.textContent || li.innerText);

Here is a fiddle to demonstrate.

If you are using jQuery (you say you are, but I see no evidence) it would be as simple as using the .text() function:

$("#myLi").text();

If your <li> contains HTML markup too, you may want that. In this case you need to use the innerHTML property:

document.getElementById("myLi").innerHTML;

Again, jQuery has it's own equivalent .html() which caters for all sorts of different browsers:

$("#myLi").html();

Upvotes: 16

Anthony Grist
Anthony Grist

Reputation: 38345

Assuming myLi is a reference to the <li> element you want to get the text of, it's as simple as:

myLi.innerText

Note that <li> elements don't have values, because they're not inputs. They have content which can be a string of text or HTML defining other page elements. If your <li> element contained other elements, and you wanted the HTML of those as a string, you could instead do:

myLi.innerHTML

What's the difference? Let's assume your HTML looked like this:

<li><span>Some text</span></li>

Then

console.log(myLi.innerHTML); // outputs: <span>Some text</span>
console.log(myLi.innerText); // outputs: Some text

Upvotes: 4

Related Questions