5

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;
4
  • 1
    What have you tried? Also, are you using an javascript libraries, like JQuery for example? Commented Aug 12, 2013 at 11:38
  • Yes sure. I'm using jquery. var listt = document.getElementById('content1'); var selectedvalue = [listt.selectedIndex].text; Commented Aug 12, 2013 at 11:39
  • 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. Commented Aug 12, 2013 at 11:42
  • 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 Commented Aug 12, 2013 at 11:42

4 Answers 4

16

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();
Sign up to request clarification or add additional context in comments.

5 Comments

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.
Sure: console.log($("ul li").map(function() { return $(this).text(); }).get());
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.
Not sure, maybe worth adding another question to address this. Not possible to diagnose through comments
$("ul li h2").map(function() { return $(this).text(); }).get(); Just added h2 and it works. Thank you very much Blade0rz
4

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

Comments

2

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

Comments

0

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)

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.