如何在JS/JQuery中先检查特定值子元素是否存在再添加子元素？

问题根源 #

你的代码无法正常工作的核心原因是条件判断逻辑错误：jQuery选择器返回的永远是jQuery对象（即使没有匹配到元素，也是空的jQuery对象），直接和false比较永远不会成立，导致每次点击都会重复添加子div。

修正后的代码 #

HTML代码

<div id="mii">
</div>

jQuery代码

$(document).ready(function () {
    $("#mii").click(function() {
        // 通过length属性判断是否存在匹配元素
        if($("#mii div span:contains('foo')").length === 0) {
            $("#mii").append("<div class='mii-item'><span>foo</span></div>");
        }
    });
});

CSS代码

#mii {
  background-color: gray;
  width: 100%;
  height: 100%;
  padding: 5px;
}
#mii:hover {
  cursor: pointer;
}

.mii-item {
  background-color: yellow;
  padding: 5px;
}

关键优化说明 #

还可以利用当前点击元素的上下文简化选择器，提升性能：

$(document).ready(function () {
    $("#mii").click(function() {
        // 基于当前点击元素查找子元素，避免重复全局查找
        if($(this).find("div span:contains('foo')").length === 0) {
            $(this).append("<div class='mii-item'><span>foo</span></div>");
        }
    });
});

内容的提问来源于stack exchange，提问作者Gogo Dev