Как проверить, существует ли элемент append?

Question

У меня есть что-то вроде этого:

if (result.Indicator == 1) { 
    $('#IndicatorImgDiv').append($('<img />').attr("src", "/Content/images/reddot.png")); 
} 

Теперь это присоединяет изображение красной точкой, когда я нажимаю на кнопку, но когда я нажимаю на кнопку еще раз, он присоединяет его снова. Я просто хочу, чтобы он появился один раз, когда я нажимаю кнопку. Как проверить, существует ли добавленный элемент или нет?

Answer 1

Просто сделать следующий:

Html код

<input id="addImage" type="button" value="Add image"/> 
    <div id="IndicatorImgDiv"> 
    </div> 

код Javascript

$("#addImage").click(function(){ 
     if($("#IndicatorImgDiv img").length == 0){ 
      $('#IndicatorImgDiv').append($('<img />').attr("src", "http://www.thepointless.com/images/reddot.jpg")); 
     } 
    }); 

Here the JSFiddle!

Answer 2

Попробуйте использовать следующий код.

if($('img').length >= 1){ 
    alert('element exist'); 
} 

Answer 3

Просто изменение:

$('#IndicatorImgDiv').append($('<img />').attr("src", "/Content/images/reddot.png")); 

To:

$('#IndicatorImgDiv').find('img[src$="reddot.png"]').length || 
    $('#IndicatorImgDiv').append($('<img />').attr("src", "/Content/images/reddot.png"));