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 check two elements are the same using jQuery/JavaScript?
We can access the HTML element using various methods in vanilla JavaScript or jQuery, a featured library of JavaScript.
Sometimes, after accessing the DOM elements, developers may require to check if both accessed elements are the same or not. In this tutorial, we will learn to use the strict equality operator of JavaScript and a method of jQuery to check the equality of two HTML elements.
Using the equality operator (==) in JavaScript
We can access the HTML element by getElemenetById, querySelector, getElementByClassName, etc. methods. After that, we can store it in the JavaScript variable, and we can compare those variables to check the equality of both elements using the equality operator, as we use it to compare two number or string values.
Syntax
Users can follow the syntax below to compare two HTML elements.
if (element1 == element2) {
// elements are the same
} else {
// elements are not the same
}
In the above syntax, element1 and element2 are HTML elements accessed using JavaScript from the DOM.
Example
In this example, we have created the <h3> HTML element and added the id attribute with the ‘test’ value. After that, we used the document.getElementById() method to access that <h3> element by id. The element1 and element2 variables contain the same element.
After that, we used the equality operator to compare them, and users can observe the output.
<html>
<body>
<h3>Using the <i>Equality operator</i> to check if two HTML elements are the same or not.</h3>
<h4 id = "test"> This is a sample element!</h4>
<p id = "output"></p>
<script>
let output = document.getElementById("output");
let element1 = document.getElementById("test");
let element2 = document.getElementById("test");
if (element1 == element2) {
output.innerHTML += "The element1 and element2 both are same.";
} else {
output.innerHTML += "The element1 and element2 both are not same!";
}
</script>
</body>
</html>
Example
We created the elements with the <h3> tag in this example. Next, we accessed the HTML element by tag name using the document.getElementByTagName() method. It returns the array of all HTML elements with <h3> tag.
After that, we compared the values from the 0th and 1st index of the elements array, and users can see in the output that they both are different.
<html>
<body>
<h3>Using the <i>Equality operator</i> to check if two HTML elements are the same or not.</h3>
<h4>This is a element1!</h4>
<h4>This is a element2!</h4>
<p id = "output"> </p>
<script>
let output = document.getElementById("output");
let elements = document.getElementsByTagName("h3");
if (elements[0] == elements[1]) {
output.innerHTML += "The element1 and element2 both are same.";
} else {
output.innerHTML += "The element1 and element2 both are not same!";
}
</script>
</body>
</html>
Using the is() method of jQuery
jQuery contains various methods to manipulate the DOM elements. The is() method takes one element as a parameter and another as a reference and compares both elements.
Also, users need to access the elements in jQuery using the ‘$’ symbol before using it with the is() method.
Syntax
Users can follow the syntax below to use the is() method to check if two HTML elements are equal.
let isEqual = $("#btn1").is($("#btn2"));
In the above syntax, we have accessed the ‘btn1’ and ‘btn2’ elements by their id.
Example
In this example, we have added the jQuery CDN to use jQuery with our HTML code. We have also created two buttons with different IDs.
In JavaScript, we have used the is() method, passed the element with id ‘btn2’ as a parameter, and taken elements with the id ‘btn1’ as reference. The is() method compares both elements and returns the boolean values which we have stored in the isEqual variable.
<html>
<head>
<script
src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"
integrity = "sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ=="
crossorigin = "anonymous" referrerpolicy = "no-referrer">
</script>
</head>
<body>
<h3> Using the <i>is() method of JQuery</i> to check if two HTML elements are same or not.</h3>
<button id = "btn1">Button 1 </button>
<button id = "btn2"> Button 2 </button>
<p id = "output"> </p>
<script>
let output = document.getElementById("output");
let isEqual = $("#btn1").is($("#btn2"));
if (isEqual) {
output.innerHTML += "The element1 and element2 both are same.";
} else {
output.innerHTML += "The element1 and element2 both are not same!";
}
</script>
</body>
</html>
We learned various approaches to compare two HTML elements. Users can either use plain JavaScript or is() method of jQuery. Also, users can use different methods to access the HTML elements and compare them.
1K+ Views
