Verificar se elemento existe com jQuery ou Javascript

Como verificar se elemento existe utilizando jQuery, verificando pelo ID, Classe ou Nome e também exemplos utilizando apenas Javascript (sem a utilização de nenhuma biblioteca externa).

Como verificar se um elemento existe, passo a passo

Você pode utilizar o exemplo a seguir para validar se um ID, classe ou até mesmo nome está presente no HTML.

Para verificar se elemento existe com Biblioteca jQuery iremos utilizar a propriedade “length” juntamente com jQuery para verificar se o elemento existe.

A propriedade “length” irá retornar 0 “zero” caso não seja encontrado nenhum elemento pelo seletor do jQuery.

Seletor de elemento do jQuery é bem flexível, permitindo que qualquer elemento seja encontrado.

Validando pelo ID

if ( $( "#myDiv" ).length ) { 
    /* elemento existe */ 
}

Validando por uma classe

if ( $( ".className" ).length ) { 
    /* elemento existe */ 
}

Validando pelo nome

if ( jQuery( "input[name=nameElement]" ).length ) { 
 /* elemento existe */
}

Mais exemplos de seletores com jQuery

jQuery possuí uma extensa lista de opções de seletores que você pode estar utilizando, juntamente com os códigos acima.

Tente ser o mais criterioso possível com a regra de seleção, isso irá aumentar a qualidade do seu código evitando futuros Bugs durante alguma manutenção.

$(“*”)	Selecione todos os elementos
$(this)	Seleciona o elemento atual
$(“p.intro”)	Seleciona todos os <p> com a classe “intro”
$(“p:first”)	Seleciona o primeiro <p>
$(“ul li:first”)	Seleciona o primeiro <li> do primeiro <ul>
$(“ul li:first-child”)	Seleciona o primeiro <li> de todos os <ul>
$(“[href]”)	Seleciona todos os elementos com atributo href
$(“a[target=’_blank’]”)	Seleciona todos <a> com valor do atributo target igual a “_blank”
$(“a[target!=’_blank’]”)	Seleciona todos <a> com valor do atributo target diferente de “_blank”
$(“:button”)	Selecione todos os botões <button> e <input> do tipo type=”button”
$(“tr:even”)	Selecione os elementos <tr> pares
$(“tr:odd”)	Selecione os elementos <tr> impares

Utilizando apenas Javascript

Caso você não queira utilizar nenhuma biblioteca para fazer essa operação, você pode utilizar apenas Javascript.

var element =  document.getElementById('ID_DO_ELEMENTO');
if (typeof(element) != 'undefined' && element != null)
{
  // exists.
}

Uma segunda forma de verificar se o elemento existe utilizando Javascript é com a propriedade parentNode.

var myElement = document.getElementById("id_do_seu_elemento");

if(!myElement.parentNode)
{
    //node is NOT on the dom
}
else
{
    //element is on the dom
}

Vanilla Javascript

Caso você tenha seletores mais avançados:

if(document.querySelectorAll("#elemId").length){}

if(document.querySelector("#elemId")){}

if(document.getElementById("elemId")){}

Conclusão

É muito importante que você evite utilizar bibliotecas/frameworks como o jQuery para realizar simples operações com o HTML.

Isso irá ajudar a manter o seu site mais rápido, reduzindo o tamanho da página, ou seja, a quantidade de kbs que o seu visitante deverá que baixar para que o site seja totalmente carregado.

Quando possível, carregue o jQuery utilizando um CDN: Lista com os jQuery CDN gratuítos

Google possuí um repositório de bibliotecas no qual está incluso diversas versões do jQuery.

https://developers.google.com/speed/libraries/