Get all the Elements in a DIV with Specific text as ID using JavaScript

A DIV element on a webpage can have different types of elements showing data in many forms. The <div> serves as a container. Now, sometimes you might want to look for elements in a <div> with id’s that have specific text. Here I’ll show you how to get all the elements inside a DIV with specific text as id’s, using JavaScript.

Let’s say, I have a list of birds on my web page. I am showing the list using <ul> and <li> tags. The list is inside a <div> element. See the image.

Get all elements in a DIV with specific text as ID using JavaScript

Each <ul> tag has unique id. Since, I have different types of birds, the ul’s id have specific texts, followed a number, to differentiate between different types of birds.

For example, if the bird is of type hawk, the id of the <ul> will have something like, hk1, followed by hk2 etc. There are other types. Now, I want to extract or get all the elements (in my case <ul>) that has the text (or is prefixed) with hk.

There are many ways you can actually do this. I am sharing two different examples here. The first example uses the .indexOf() method and second example uses the .querySelectorAll() method.

1) Using .indexOf() Method

<!DOCTYPE html>
<html>
<body>
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            clear: both;
        }
        ul li {
            padding: 5px 3px;
            border: 1px solid #CCC;
            font: 17px Calibri;
            width: 150px;
            display: inline-table;
        }
    </style>

    <p>Click the button to find the Hawks from the list of Birds!</p>

    <div id="birds">
        <ul id='hk1'><li>Bald Eagle</li><li>Hawk</li></ul>
        <ul id='sp1'><li>Bell's Sparrow</li><li>Sparrow</li></ul>
        <ul id='hk2'><li>American Kestrel</li><li>Hawk</li></ul>
        <ul id='wp1'><li>Hairy Woodpecker</li><li>Woodpecker</li></ul>
        <ul id='hk3'><li>Black Vulture</li><li>Hawk</li></ul>
    </div>

    <p>
        <input type="button" id="check" onclick="findHawks()" value="Click it" />
    </p>
    <p id="result"></p>
</body>
<script>
    function findHawks() {
        var theDiv = document.getElementById('birds').children;

        for (var i = 0; i < theDiv.length; i++) {
            if (theDiv[i].tagName == 'UL') {       // Check if the element is <ul>.

                // Find the text "hk" using "indexOf()" method.
                if (theDiv[i].id.indexOf('hk') == 0) {   // Change "hk" to "sp" to get all the Sparrows from the list.
                    var li = theDiv[i].children;

                    // Show the names of the Birds of type Hawk.
                    result.innerHTML = result.innerHTML + '<br />' + li[0].innerHTML;
                }
            }
        }
    }
</script>
</html>

Try it

The script is simple. I am using the indexOf() method to check if a string or the id of the element has the text hk. The indexOf() method returns 0 (zero) if it finds a match.

👉 How to check if a DIV element contains P elements using JavaScript .contains() method

In the beginning of the script, I am getting all the child elements inside the <div> element using the “children” property.

var theDiv = document.getElementById('birds').children;

The <div> element, as I said, can have many different elements. So, I need to check the type of element the <div> has. I am running a loop and checking if the element is of type UL, using the tagName property.

if (theDiv[i].tagName == 'UL') { }

The next if condition checks if the element’s id has a text that starts with hk. That’s the element I want from the list, and shows the result.

if (theDiv[i].id.indexOf('hk') == 0) { }

2) Using .querySelectorAll() Method

In this example I am using the same markup that I have used in the above example.

The querySelectorAll() method returns a collection of child elements from its parent element. The parent element, in our case, is a <div>.

<!DOCTYPE html>
<html>
<body>
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            clear: both;
        }
        ul li {
            padding: 5px 3px;
            border: 1px solid #CCC;
            font: 17px Calibri;
            width: 150px;
            display: inline-table;
        }
    </style>

    <p>Example using <b>querySelectorAll()</b> method. <br />Click the button to find the Hawks from the list of Birds!</p>

    <div id="birds">
        <ul id='hk1'><li>Bald Eagle</li><li>Hawk</li></ul>
        <ul id='sp1'><li>Bell's Sparrow</li><li>Sparrow</li></ul>
        <ul id='hk2'><li>American Kestrel</li><li>Hawk</li></ul>
        <ul id='wp1'><li>Hairy Woodpecker</li><li>Woodpecker</li></ul>
        <ul id='hk3'><li>Black Vulture</li><li>Hawk</li></ul>
    </div>

    <p>
        <input type="button" id="check" onclick="findHawks()" value="Click it" />
    </p>
    <p id="result"></p>
</body>
<script>
    function findHawks() {
        var t = document.querySelectorAll('div ul[id^="hk"]');
        for (var i = 0; i < t.length; i++) {
            // Show the names of the Birds.
            result.innerHTML = result.innerHTML + '<br />' + (t[i].children[0].innerHTML);
            t[i].children[0].style.color = '#F00';
        }
    }
</script>
</html>

Try it

Look at the parameter values of the querySelectAll() method. Since, I want to extract elements that have ids with a specific text, I have defined the selector ul with id that matches the text hk.

document.querySelectorAll ('div ul[id^="hk"]')

You can also use the > (greater than sign) after the div selector. Like this ...

document.querySelectorAll ('div > ul[id^="hk"]')

Well, that’s it. You can use both the methods that I have explained in this post.

Thanks for reading. 🙂

← PreviousNext →