Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to read all spans of a div dynamically?
One HTML element can contain multiple nested HTML elements while creating web pages. In some cases, developers may require to read the particular HTML elements of one HTML element. In our case, we require to read all span elements of the div element and extract the content of them.
In this tutorial, we will learn to read the content of all spans of a div element using JavaScript and again append it to the web page in the formatted way.
Syntax
Users can follow the syntax below to read all spans of a div element dynamically using JavaScript.
var spans = div.getElementsByTagName("span");
for (var i = 0; i < spans.length; ++i) {
output.innerHTML += spans[i].innerHTML + "<br>";
}
In the above syntax, we get the 'span' element by tag name and read all span elements one by one.
Using getElementsByTagName() Method
In the example below, we created the div element containing the 'myDiv' id. Also, we added 5 span elements containing different content.
In JavaScript, we accessed the div element using its id. After that, we accessed all span elements by tag name, which are the children of the div element. Next, we used the for loop to make iterations of an array of span elements and get the inner HTML of every span element.
<html>
<body>
<h2> Reading <i> all the spans of a div element </i> dynamically using JavaScript </h2>
<div id="myDiv">
<span> First </span>
<span> Second </span>
<span> Third </span>
<span> Fourth </span>
<span> Fifth </span>
</div>
<br>
<div id="output"> </div>
<script>
var div = document.getElementById("myDiv");
var spans = div.getElementsByTagName("span");
var output = document.getElementById("output");
for (var i = 0; i < spans.length; ++i) {
output.innerHTML += spans[i].innerHTML + "<br>";
}
</script>
</body>
</html>
First Second Third Fourth Fifth
Filtering Spans from Mixed Content
In the example below, we created the div element with an id equal to the 'content'. The div element contains the multiple '<p>', '<span>', and '<div>' elements as children in random order, but we extract only span elements.
In JavaScript, we access div elements and child span elements. After that, we read the content of only span elements and append its content to the list.
<html>
<body>
<h2> Reading <i> all the spans of a div element </i> dynamically using JavaScript </h2>
<div id="content">
<p> This is the first paragraph. </p>
<p> This is the second paragraph. </p>
<span> This is the first span. </span>
<div> This is a div element. </div>
<span> This is the second span. </span>
<span> This is the third span. </span>
<h2> This is a h2 element </h2>
<p> This is the third paragraph. </p>
<span> This is the fourth span. </span>
</div>
<br>
<ul id="output"> </ul>
<script>
var div = document.getElementById("content");
var spans = div.getElementsByTagName("span");
var output = document.getElementById("output");
for (var i = 0; i < spans.length; i++) {
var li = document.createElement("li");
li.innerHTML = spans[i].innerHTML;
output.appendChild(li);
}
</script>
</body>
</html>
? This is the first span. ? This is the second span. ? This is the third span. ? This is the fourth span.
Using children Property with Tag Name Check
In this example, we added the fruits name in the span tag and its explanation in the div tag. So, parent div contains the span and div elements as children.
In JavaScript, we used the 'children' property to get all children of the div element. After that, we iterate through all children elements. In the for loop, we check whether the current element is 'span' element by using the 'tagName' property. If yes, we read its content and append it to the list. Otherwise, we continue to iterate.
<html>
<body>
<h3> Reading <i> all the spans of a div element </i> dynamically using JavaScript </h3>
<div id="fruits">
<span> Apple </span>
<div> Color: red </div>
<span> Orange </span>
<div> Color: orange </div>
<span> Banana </span>
<div> Color: yellow </div>
<span> Watermelon </span>
<div> Color: green </div>
</div>
<h3> Output: </h3>
<ul id="output"> </ul>
<script>
let fruits = document.getElementById("fruits");
let children = fruits.children;
let output = document.getElementById("output");
for (let i = 0; i < children.length; i++) {
if (children[i].tagName == "SPAN") {
output.innerHTML += "<li>" + children[i].innerHTML + "</li>";
}
}
</script>
</body>
</html>
? Apple ? Orange ? Banana ? Watermelon
Comparison of Methods
| Method | Pros | Cons |
|---|---|---|
getElementsByTagName() |
Direct span selection, Simple to use | Only gets spans, no filtering needed |
children + tagName check |
More control over iteration | Requires manual tag name checking |
Conclusion
We learned to read all span elements of the div elements dynamically using JavaScript. The getElementsByTagName() method is the most straightforward approach, while using children property provides more flexibility when you need additional filtering logic.
1K+ Views
