How to get SPAN tag inside li using jQuery and JavaScript

← Prev

In today’s post, I am sharing a quick tip showing how to get <span> element inside an <li> tag using jQuery and JavaScript. Let’s assume, I have an unordered list 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.

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.

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,

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

Using JavaScript

<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 element inside each <li> and therefore, I have assigned an index of 0 to the children property, followed by the innerHTML property. You can use innerText too.

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>

That's it. Thanks for reading.

← Previous


Like this Article? Subscribe now, and get all the latest articles and tips, right in your inbox.
Delivered by FeedBurner