How to get Value / Text of a List item Javascript

Question

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;

Shikari

What have you tried? Also, are you using an javascript libraries, like JQuery for example? – Subbase

Yes sure. I'm using jquery. var listt = document.getElementById('content1'); var selectedvalue = [listt.selectedIndex].text; – Composed

Can you explain in details about your query? May be jsfiddle on what you are attempting to do, So that we can guide you to the correct direction. Without more information people might not be able to help you. – Baby

How do you identify which specific <li> element you want to get the text for? Does it have a specific ID? Does it have a unique class with a specific <ul>? Showing some of your HTML might help clear this up – Subbase

Answer 1

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();

Hexyl

OKay Thanks. This "alert($(this).text());" Works great for me. Is there a way to get the data directly in an array ? I get something like "CD-Store2 M". CD-Store is a value, 2 also and M. – Composed

Sure: console.log($("ul li").map(function() { return $(this).text(); }).get()); – Hexyl

I get now. ["Chile Company 1 M ", "CD-Store 2 M "], So what i need is only Chile Company and not the 1 and M. – Composed

Not sure, maybe worth adding another question to address this. Not possible to diagnose through comments – Hexyl

$("ul li h2").map(function() { return $(this).text(); }).get(); Just added h2 and it works. Thank you very much Blade0rz – Composed

Answer 2

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

Velarize

Answer 3

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

Anal

Answer 4

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)

Schelling