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 Select Divs That Has A Specific HTML Content That Matches Values?
The division tag is also known as the div tag. HTML uses the div tag to create content divisions in web pages such (text, images, header, footer, navigation bar, etc.). It is required to close the div tag, which has an opening (<div>) and closing (</div>) tag.
The Div element is the most useful in web development because it allows us to divide out the data on a web page and create specific sections for different types of information or functions.
Let’s look into the following examples for getting better understanding on how to select divs that has a specific HTML content that matches values.
Example
In the following example we are running the script to select divs that has specific HTML content.
<!DOCTYPE html>
<html>
<body>
<style>
.cricketers {
width: 100px;
}
.marked {
background-color: #27AE60 ;
}
</style>
<div class="cricketers">
<div>MSD</div>
<div> KOHLI </div>
<div> YUVI </div>
<div> SEHWAG </div>
<div> SACHIN </div>
</div>
<script>
const visited = ["MSD"]
const monElement = document.querySelector('.cricketers')
for (let i = 0; i < monElement.children.length; i++) {
let cricketers = monElement.children[i].textContent; 4. How To Select Divs That Has A Specific HTML Content That Matches Values
for (let v of visited) {
if (v == cricketers) {
monElement.children[i].innerHTML += ' - selected';
monElement.children[i].classList.add("marked");
}
}
}
</script>
</body>
</html>
When the script gets executed, it will generate an output consisting of names that are used with a div. Out of these texts, one gets highlighted with green, which indicates the div was selected.
Example
Execute the below code and observe how different sections get selected with different colors.
<!DOCTYPE html>
<html>
<body>
<style>
td[data-content="female"] {
color: #7D3C98;
}
td[data-content^="p" i] {
color: #239B56 ;
}
td[data-content*="8"] {
color: #DE3163;
}
</style>
<div>
<table>
<tr>
<td data-content="Jhon">Jhon</td>
<td data-content="male">male</td>
<td data-content="28">28</td>
</tr>
<tr>
<td data-content="Sindhu">Sindhu</td>
<td data-content="female">female</td>
<td data-content="18">18</td>
</tr>
</table>
</div>
</body>
</html>
On running the above script, the output window will pop up, displaying the text that was selected in a different color based on the conditions provided in the code on the webpage.
50 Views
