Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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.
Example 1
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.
In the output, we can see the content of the 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>
</html>
Example 2
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>
</html>
Example 3
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>
</html>
Conclusion
We learned to read all span elements of the div elements dynamically using JavaScript. In the first two examples, we access all span elements and then iterate through them. In the third example, we iterate through all children elements of the div element and identify the span elements while iterating.
726 Views
