如何检查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"));

致：

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