How to check two elements are same using jQuery/JavaScript ?

0 0 1 minute read

Given an HTML document containing two elements and the task is to check whether both elements are same or not with the help of JavaScript.

Approach 1: Use is() method to check both selected elements are same or not. It takes an element as argument and check if it is equal to the other element.

Example: This example implements the above approach.

html

<script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> 
</script> 
<h1 style="color:green;"> 
    GeeksForGeeks 
</h1> 
  
<p id="GFG_UP" style="font-size: 15px; font-weight: bold;"> 
</p> 
  
<button onclick="GFG_Fun()"> 
    click here 
</button> 
  
<p id="GFG_DOWN" 
   style="color:green; font-size: 20px; font-weight: bold;"> 
</p> 
  
<script> 
    var up = document.getElementById('GFG_UP'); 
    var down = document.getElementById('GFG_DOWN'); 
    var id1 = "GFG_UP"; 
    var id2 = "GFG_UP"; 
      
    up.innerHTML = "Click on the button to check if " 
            + "both elements are equal.<br>" + "id1 = " 
            + id1 + "<br>id2 = " + id2; 
      
    function GFG_Fun() { 
        if ($('#GFG_UP').is($('#GFG_UP'))) { 
            down.innerHTML = "Both elements are same"; 
        } else { 
            down.innerHTML = "Both elements are different"; 
        } 
    } 
</script>

Output:

Approach 2: The == operator is used to compare two JavaScript elements. If both elements are equal then it returns True otherwise returns False. Example: This example implements the above approach.

html

<script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> 
</script> 
<h1 style="color:green;"> 
    GeeksForGeeks 
</h1> 
  
<p id="GFG_UP" 
   style="font-size: 15px; font-weight: bold;"> 
</p> 
  
<button onclick="GFG_Fun()"> 
    click here 
</button> 
  
<p id="GFG_DOWN" 
   style="color:green; font-size: 20px; font-weight: bold;"> 
</p> 
  
<script> 
    var up = document.getElementById('GFG_UP'); 
    var down = document.getElementById('GFG_DOWN'); 
    var id1 = "GFG_UP"; 
    var id2 = "GFG_DOWN"; 
      
    up.innerHTML = "Click on the button to check if both" 
            + " elements are equal.<br>" + "id1 = " 
            + id1 + "<br>id2 = " + id2; 
      
    function GFG_Fun() { 
        if ($('#GFG_UP')[0] == $('#GFG_DOWN')[0]) { 
            down.innerHTML = "Both elements are same"; 
        } else { 
            down.innerHTML = "Both elements are different"; 
        } 
    } 
</script> 