¿Cómo verificar que existe un elemento con una ID específica usando JavaScript?

Dado un documento HTML que contiene algunos elementos y los elementos contienen algún atributo de identificación. La tarea es verificar que el elemento con una ID específica exista o no use JavaScript (sin JQuery).
Hay dos enfoques que se analizan a continuación:

Enfoque 1: Primero, usaremos document.getElementById() para obtener la ID y almacenarla en una variable. Luego compare el elemento (variable que almacena ID) con ‘null’ e identifique si el elemento existe o no.

Ejemplo:

<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        How to check an element with specific
        ID exists using JavaScript?
    </title>
</head>
  
<body style="text-align:center;">
  
    <h1 style="color:green;">
        GeeksForGeeks
    </h1>
      
    <p id="GFG_UP"></p>
  
    <button onClick="GFG_Fun()">
        click here
    </button>
      
    <p id="GFG_DOWN"></p>
  
    <script>
        var el_up = document.getElementById('GFG_UP');
        var el_down = document.getElementById('GFG_DOWN');
  
        el_up.innerHTML = "Click on button to check if "
                    + "element exists using JavaScript.";
                      
        function GFG_Fun() {
            var el = document.getElementById('GFGUP');
            if (el != null) {
                el_down.innerHTML = "Element Exists";
            } else {
                el_down.innerHTML = "Element Not Exists";
            }
        }
    </script>
</body>
  
</html>

Producción:

Enfoque 2: Primero, usaremos document.getElementById() para obtener la ID y almacenarla en una variable. Luego use el método JSON.stringify() en el elemento (variable que almacena ID) y compare el elemento con la string ‘nula’ y luego identifique si el elemento existe o no.

Ejemplo:

<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        How to check an element with specific
        ID exists using JavaScript?
    </title>
</head>
  
<body style="text-align:center;">
  
    <h1 style="color:green;">
        GeeksForGeeks
    </h1>
      
    <p id="GFG_UP"></p>
  
    <button onClick="GFG_Fun()">
        click here
    </button>
      
    <p id="GFG_DOWN"></p>
  
    <script>
        var el_up = document.getElementById('GFG_UP');
        var el_down = document.getElementById('GFG_DOWN');
        el_up.innerHTML = "Click on button to check if "
                    + "element exists using JavaScript.";
                      
        function GFG_Fun() {
            var el = document.getElementById('GFGUP');
            if (JSON.stringify(el) != "null") {
                el_down.innerHTML = "Element Exists";
            } else {
                el_down.innerHTML = "Element Not Exists";
            }
        }
    </script>
</body>
  
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta