How to check if an id exists on the page

Question

made a Javascript that generates several cards each of them with an id, to avoid creating repeat cards I put an if before the generation of cards to check if it already exists, but it did not work:

$(document).on('click', '#carregarMaisFiltro',function(){ 
    var init = (jQuery('.anunciosJsonFiltro').length);
    var combo = document.getElementById("busca_anuncio_categoria");
    var categoria = combo.options[combo.selectedIndex].value; 
    var comboEstado = document.getElementById("busca_anuncio_estado");
    var estado = comboEstado.options[comboEstado.selectedIndex].value; 
    carregar(init, 3, categoria, estado,'Chamadas/listarAnuncios.php')
  });

  $(document).on('click', '#btn_filtrarAnuncio',function(evento){ 
    var combo = document.getElementById("busca_anuncio_categoria");
    var categoria = combo.options[combo.selectedIndex].value; 
    var comboEstado = document.getElementById("busca_anuncio_estado");
    var estado = comboEstado.options[comboEstado.selectedIndex].value; 
    evento.preventDefault();
    carregar(0, 3, categoria, estado, 'Chamadas/listarAnuncios.php');
    document.getElementById('cardAnuncios').innerHTML = "";
  });

  function carregar(init, max, categoria, estado, url){
  var dados = { init : init, max : max, categoria : categoria, estado : estado };
  if(init >= 3)
  {
      $('#img_loadBuscarAnuncio').fadeIn('slow');
      $('#cardContainer').css("opacity", 0.4);
  }
  $.post(url, dados, function (data) {
      $("#carregarMaisFiltro").last().remove();

      for(i = 0; i < data.dados.length; i++){
          var img = data.dados[i].img ? data.dados[i].img : "../anuncio-padrao.png";
          if (document.getElementById('"'+data.dados[i].cd_anuncio+'"') == null || document.getElementById('"'+data.dados[i].cd_anuncio+'"') == undefined){


      $("#cardAnuncios").append('<div class="anunciosJsonFiltro" id="'+data.dados[i].cd_anuncio+'" value="'+data.dados[i].cd_anuncio+'">'
          +'<a style="display: block; color: rgba(0,0,0,0.87);" href="#">'
               +'<div style="box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); overflow: hidden; margin-bottom: 6px;">'  
                   +'<div class="col s4 m4" style="padding: 0px; margin: 0px;">'
                      +'<div style="width: 100%; overflow: hidden;">'
                          +'<div style="display: inline-block; position: relative; right: -50%;">'
                               +'<img src="img/anuncios/'+img+'" alt="user background" style="height: 150px; width: auto; position: relative; left: -50%; vertical-align: bottom;">'
                           +'</div>'
                       +'</div>'
                   +'</div>'
                   +'<div class="col s8 m8 truncate-text" style="padding-left: 14px; padding-top: 8px; height: 150px;">'
                           +'<span class="grey-text text-darken-4" style="font-size: 20px;">'+data.dados[i].nm_titulo+'</span>'
                          +'<br>'
                          +'<span class="grey-text">Anúncio criado por: '+data.dadosComplementares[i].nm_usuario+' em '+moment(data.dados[i].dt_criacao).format("DD/MM/YYYY")+'</span>'
                          +'<div class="star-result" style="margin-bottom: -10px;">'
                               +'<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">'
                               +'<style>'
                                   +'.checked {'
                                       +'color: orange;'
                                  +'}'
                             +'</style>'
                              +'<span class="fa fa-star checked"></span>'
                               +'<span class="fa fa-star checked"></span>'
                               +'<span class="fa fa-star checked"></span>'
                               +'<span class="fa fa-star"></span>'
                               +'<span class="fa fa-star"></span>'
                           +'</div>'
                           +'<br>'
                           +'<i class="mdi-image-navigate-next cyan-text text-darken-2"></i>'
                           +'<span class="cyan-text text-darken-2">'+data.dadosComplementares[i].categoria+'</span>'
                           +'<br>'
                           +'<i class="mdi-communication-location-on cyan-text text-darken-2"></i>'
                          +'<span class="cyan-text text-darken-2">'+data.dadosComplementares[i].bairro+', '+data.dadosComplementares[i].municipio+' - '+data.dadosComplementares[i].estado+'</span>'
                   +'</div>'
               +'</div>'
           +'</a>'
           +'</div>');
      }
    }

      if(data.dados.length > 0)
      {
          $("#cardAnuncios").append('<button id="carregarMaisFiltro" class="btn right" style="background-color: #0097a7;" type="submit" name="action"><center>Carregar mais</center></button>');
      }; 
      var conta = $(".anunciosJsonFiltro").length;

      if(conta == data.totalAnuncios+init) {
          // deveria parar aqui  < ------
          $("#carregarMaisFiltro").last().remove();
          $('#img_loadBuscarAnuncio').fadeOut('slow');
          $('#cardContainer').css("opacity", 1.0);
          $("#carregarMaisFiltro").hide();
      }
  }, "json");
  }

Answer 1

Your idea is right, but the implementation is a little strange.

document.getElementById('"'+data.dados[i].cd_anuncio+'"')

Why are you concatenating double quotes with the id? Quotes are for declaring a string, they are not part of the query itself, so your query is not working, a simple document.getElementById(data.dados[i].cd_anuncio) suffice. Moreover there is no need to compare the result with undefined, if the query does not find the element, it will return null.