How to read all spans of a div dynamically ?

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:

Output:

Example 2:

Output: