Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

How to read all spans of a div dynamically ?

  • Last Updated : 23 Apr, 2021

In this article we will learn to read text content of all <span> elements of a <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 display it as a list.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

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




<!DOCTYPE html>
<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>
  
</html>

Output:

Example 2:

HTML




<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>
  
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :