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

16 Oct, 2019
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.
<!DOCTYPE HTML>  <html>    <head>     <title>        How to check two elements are same       using jQuery/JavaScript?    </title>          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </script></head>  <body style = "text-align:center;">            <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> </body>    </html>
Output:
Before clicking on the button:
After clicking on the button:
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 implaments the above approach.
<!DOCTYPE HTML>  <html>    <head>     <title>         How to check two elements are same        using jQuery/JavaScript ?    </title>          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </script></head>  <body style = "text-align:center;">          <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> </body>    </html>
Output:
Before clicking on the button:
After clicking on the button:
javascript-basics
jQuery-Basics
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to append HTML code to a div using JavaScript ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills