Open In App

How to read all spans of a div dynamically ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will learn to read the text content of all <span> elements of an <div> element.

Approach: We will first select the division inside which we are going to find the <span> elements. This can be done using by selecting the element by its ID using the getElementById() method. We will next get all the elements that are of the specified type that are contained in this division. This can be done by using the getElementsByTagName() method on the division we have found in the previous step. We can then get the text content inside it by looping through all the span elements and displaying it as a list.

Syntax:

let getInfo = () => {

  // Get the division inside which the
  // spans have to be found
  let container = document.getElementById("container");
  let spans = container.getElementsByTagName("span");

  // Get output element
  let outputP = document.getElementById("output");

  // Iterate over spans
  for (let span of spans) {

    // Create a new list element with the data
    let listElem = document.createElement("li");
    listElem.textContent = span.textContent;

    // Insert text content of span inside output html element
    outputP.appendChild(listElem);
  }
};

The below examples demonstrate this approach.

Example 1:

HTML




<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
      
    <!-- Define the span elements
              with text content -->
    <div id="container">
        <span> Span 1 </span>
        <span> Span 2 </span>
        <span> Span 3 </span>
        <span> Span 4 </span>
        <span> Span 5 </span>
        <span> Span 6 </span>
    </div>
      
    <button onclick="getInfo()" style="margin-top: 20px;">
        Get Text
    </button>
      
    <h4>
        Text of only <span> elements
        inside division:
    </h4>
      
    <ul id="output"></ul>
      
    <script>
        let getInfo = () => {
            // Get the division inside which the
            // spans have to be found
            let container =
                document.getElementById("container");
            let spans =
                container.getElementsByTagName("span");
          
            // Get output element
            let outputP =
                document.getElementById("output");
          
            // Iterate over spans
            for (let span of spans) {
          
                // Create a new list element
                // with the data
                let listElem =
                    document.createElement("li");
                listElem.textContent =
                    span.textContent;
          
                // Insert text content of span
                // inside output html element
                outputP.appendChild(listElem);
            }
        };
    </script>
</body>


Output:

Example 2:

HTML




<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
      
    <!-- Define the span elements
              with text content -->
    <div id="container">
        <span> Span 1 </span>
      
        <p> This is another tag </p>
      
        <span> Span 2 </span>
      
        <p> This is another tag </p>
      
        <span> Span 6 </span>
    </div>
      
    <button onclick="getInfo()" style="margin-top: 10px;">
        Get Text
    </button>
      
    <h4>
        Text of only <span> elements
        inside division:
    </h4>
      
    <p id="output"></p>
      
    <script>
        let getInfo = () => {
            // Get the division inside which the
            // spans have to be found
            let container =
                document.getElementById("container");
            let spans =
                container.getElementsByTagName("span");
          
            // Get output element
            let outputP =
                document.getElementById("output");
          
            // Iterate over spans
            for (let span of spans) {
          
                // Create a new list element
                // with the data
                let listElem =
                    document.createElement("li");
                listElem.textContent =
                    span.textContent;
          
                // Insert text content of span
                // inside output html element
                outputP.appendChild(listElem);
            }
        };
    </script>
</body>


Output:



Last Updated : 15 Feb, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads