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;"> neveropen </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;"> neveropen </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:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
