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 check two elements are the same using jQuery/JavaScript?
We can access HTML elements using various methods in vanilla JavaScript or jQuery. Sometimes, after accessing DOM elements, developers need to check if both accessed elements are the same or not. In this tutorial, we will learn to use JavaScript's strict equality operator and jQuery's is() method to check the equality of two HTML elements.
Using the Equality Operator (===) in JavaScript
We can access HTML elements using methods like getElementById, querySelector, getElementsByClassName, etc. After storing elements in JavaScript variables, we can compare them using the strict equality operator (===).
Syntax
if (element1 === element2) {
// elements are the same
} else {
// elements are not the same
}
In the above syntax, element1 and element2 are HTML elements accessed from the DOM.
Example: Same Element Comparison
In this example, we access the same element twice using getElementById and compare them. Both variables point to the same DOM element.
<html>
<body>
<h3>Using the <i>Equality operator</i> to check if two HTML elements are the same</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 are the same.";
} else {
output.innerHTML = "The element1 and element2 are not the same!";
}
</script>
</body>
</html>
Example: Different Elements Comparison
Here we access different HTML elements using getElementsByTagName and compare elements at different indices of the returned array.
<html>
<body>
<h3>Using the <i>Equality operator</i> to check if two HTML elements are the same</h3>
<h4>This is element1!</h4>
<h4>This is element2!</h4>
<p id="output"></p>
<script>
let output = document.getElementById("output");
let h4Elements = document.getElementsByTagName("h4");
if (h4Elements[0] === h4Elements[1]) {
output.innerHTML = "The elements are the same.";
} else {
output.innerHTML = "The elements are not the same!";
}
</script>
</body>
</html>
Using the is() Method of jQuery
jQuery's is() method checks if the selected element matches a given selector or element. It returns a boolean value indicating whether the elements are the same.
Syntax
let isEqual = $("#element1").is($("#element2"));
Example
In this example, we compare two different buttons using jQuery's is() method. The method returns false since they are different elements.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
</head>
<body>
<h3>Using the <i>is() method of jQuery</i> to check if two HTML elements are the same</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 elements are the same.";
} else {
output.innerHTML = "The elements are not the same!";
}
</script>
</body>
</html>
Comparison
| Method | Library Required | Performance | Use Case |
|---|---|---|---|
| Strict Equality (===) | No | Faster | Direct element comparison |
| jQuery is() | jQuery | Slower | Selector-based comparison |
Key Points
- Use strict equality (===) for direct DOM element comparison
- jQuery's
is()method can compare elements and selectors - Elements accessed by the same method and identifier are identical references
- Different DOM elements are never equal, even with identical content
Conclusion
Both JavaScript's strict equality operator and jQuery's is() method effectively compare HTML elements. Choose the strict equality operator for better performance in vanilla JavaScript, or use jQuery's is() method when working within a jQuery environment.
2K+ Views
