Get the text of an li element

Question

<ul class="leftbutton" >
    <li id="menu-selected">Sample 1</li>
    <li>Sample 2</li>
    <li>Sample 3</li>
    <li>Sample 4</li>
    <li>Sample 5</li>
</ul>

I want to get the text of the li item which the id="menu-selected".
Right now I am doing something like

document.getElementById('menu_selected').childNodes.item(0).nodeValue

Is there any simpler way of doing the same?

what if I want to get the text contained in all li elements...not just a specific one — Dimitris Papageorgiou, Jan 25 '21 at 11:44

score 25 · Accepted Answer · answered Mar 17 '10 at 08:20

25

In your case:

document.getElementById('menu_selected').innerHTML

answered Mar 17 '10 at 08:20

Alsciende

26,583
9
51
67

Andy E · Answer 2 · 2010-03-17T08:39:37.123

If you have HTML inside the LI elements and you only want to get the text, you need innerText or textContent.

var liEl = document.getElementById('menu_selected');
var txt = liEl["innerText" in liEl ? "innerText" : "textContent"];

To avoid using this conditional statement every time, you could just declare a global variable:

var textContentProp = "innerText" in document.body ? "innerText" : "textContent";
function getText()
{
    return document.getElementById('menu_selected')[textContentProp];
}

score 6 · Answer 3 · answered Mar 17 '10 at 08:42

6

If you can use jQuery it boils down to

var text = $('#menu_selected').text();

answered Mar 17 '10 at 08:42

Atanas Korchev

30,562
8
59
93

score 0 · Answer 4 · answered Mar 17 '10 at 08:22

0

Try document.getElementById('menu_selected').text

answered Mar 17 '10 at 08:22

KJ Saxena

21,452
24
81
109

It should be `textContent` in FF and `text` in IE – Amarghosh Mar 17 '10 at 08:45
1

@Amarghosh: It's `innerText` in IE, `text` only applies to a few elements. – Andy E Mar 17 '10 at 08:49

dan.riley · Answer 5 · 2022-05-09T04:27:11.643

I was wondering how to do this for a broader sense instead of selecting by ID and came across this.

const listItemTextContent = Array.from(document.querySelectorAll("li"))

const listItemTextArray = 
    listItemTextContent.map(itemText => itemText.firstChild.data)

console.log(listItemTextArray);

or you can use a condensed/chained alternative!

const listItemTextContent = 
    Array
        .from(document.querySelectorAll("li"))
        .map(itemText => itemText.firstChild.data)

console.log(listItemTextContent)

I hope this helps somebody!

Get the text of an li element

5 Answers5

Linked