How to get SPAN tag inside li using jQuery and JavaScript

jquery javascript

← PrevNext →

I am sharing a quick tip here showing how to get <span> element inside an <li> tag using jQuery and JavaScript. Let’s assume, I have an unordered list (<ul>) on my web page and inside each <li> tag, I have span element. How do I get the span elements and its contents using jQuery or JavaScript? Let us find out.

Note: This is not a comparison between JavaScript and jQuery methods, or which is good. It’s just a solution. Use the method that suits your requirement.

1) Get span text inside li using jQuery

I am sharing two simple jQuery methods here, which will allow you to easily get or extract contents of span element inside an <li> tag (it can be a div or p tag).

The Markup
<body>
     <ul>
    	<li id='l1'>
            <span>some text here</span>
        </li>
        <li id='l2'>
            <span>some more text here</span>
        </li>
    </ul>
</body>

I have two <li> elements and each has a <span>, with some text.

The Script
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
    $('li').click(function () {
        console.log($(this).find('span').text());
        console.log($(this).children('span').text());
    });
</script>
Try it

See these built-in methods .find() and .children(). You’ll get the same result using these different methods. You have to define the element or tag as parameter to the methods. It will return the contents.

You may also like... How to tilt or rotate a span element without JavaScript

Assign Text to the <span>

If in case you want to assign some text to the <span>, use the same methods that I have used. For example,

<body>
  <ul>
    <li id='l1'>
      <span>Computer Science</span>
    </li>
    <li id='l2'>
      <span>Artificial Intelligence</span>
    </li>
  </ul>
</body>
<script>
    $('li').click(function () {
        $(this).find('span').text('hi');
        
         // alternatively, you can use the children() method.
        // $(this).children('span').text('hello');
    });
</script>
Try it

2) Get span text inside li using JavaScript

You can do the above procedures using plain old JavaScipt.

<body>
    <ul>
        <li id='l1' onclick='get_span(this)'>
            <span>some text here</span>
        </li>
        <li id='l2' onclick='get_span(this)'>
            <span>some more text here</span>
        </li>
    </ul>
</body>

<script>
    let get_span = (ele) => {
    	let li = document.getElementById(ele.id);
    	console.log(li.children[0].innerHTML);
    }
</script>
Try it

This method is super easy. I am using the children property to get the contents of the each child element inside the <li> elements. The child of-course is a <span> element.

I have only one element inside each <li> and therefore, I have assigned an index of 0 to the children property, followed by the innerHTML property. You can also use innerText.

If you have multiple child elements, then you can iterate through elements (run a loop) and get the elements using indexes like 0, 1, 2 etc. For example,

<li id='l1' onclick='get_span(this)'>
    <span>Name</span> | <span>Roll No.</span>
</li>
<script>
     let get_span = (ele) => {
        let li = document.getElementById(ele.id);
        for (let i = 0; i <= li.children.length - 1; i++) {
      	    console.log(li.children[i].innerHTML);
        }
    }
</script>

← PreviousNext →