本文详解如何在使用 jQuery 动态添加 DOM 元素前，准确判断目标子元素（如含特定文本的 ）是否已存在，避免重复插入；重点纠正 :contains() 选择器返回值误判的常见错误，并提供健壮、可复用的实践方案。
本文详解如何在使用 jquery 动态添加 dom 元素前，准确判断目标子元素（如含特定文本的 ``）是否已存在，避免重复插入；重点纠正 `:contains()` 选择器返回值误判的常见错误，并提供健壮、可复用的实践方案。
在前端开发中，常需实现“有则跳过，无则添加”的逻辑——例如点击容器时，仅当其中尚未存在含特定文本（如 "foo"）的子项时，才动态插入新条目。但初学者容易陷入一个典型误区：直接将 jQuery 选择器结果与 false 比较，如 if($("#mii div span:contains('foo')") == false)。这是错误的，因为 jQuery 选择器始终返回一个 jQuery 对象（即使无匹配项），该对象在布尔上下文中恒为 true，导致条件永远不成立。
✅ 正确做法是检查匹配元素的数量：使用 .length 属性判断结果集是否为空。
以下是修复后的完整代码：
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
$(document).ready(function () {
$("#mii").click(function() {
// ✅ 正确：检查匹配到的元素个数是否为 0
if ($("#mii div span:contains('foo')").length === 0) {
$("#mii").append("<div class="mii-item"><span>foo</span></div>");
}
});
});
⚠️ 注意事项：
-
:contains('foo')是部分匹配（case-sensitive），会匹配"food"或"foo bar"。若需精确匹配整个文本内容，应改用.filter()配合$.trim()和严格相等判断：const exists = $("#mii div span").filter(function() { return $.trim($(this).text()) === "foo"; }).length > 0; if (!exists) { $("#mii").append("<div class="mii-item"><span>foo</span></div>"); } - 若需频繁执行此类检查，建议封装为可复用函数，提升可维护性：
function appendIfNotExists($parent, selector, html) { if ($parent.find(selector).length === 0) { $parent.append(html); } } // 使用示例 $("#mii").click(() => { appendIfNotExists($("#mii"), "div span:contains('foo')", "<div class="mii-item"><span>foo</span></div>"); });
? 总结：jQuery 选择器返回的是对象而非布尔值，length === 0 是判断“不存在”的唯一可靠方式；对文本精确性要求高时，应避免 :contains()，转而使用 .filter() + .text() 进行显式比对。这一原则同样适用于原生 JavaScript（如 element.querySelectorAll(selector).length === 0），是 DOM 操作中的基础健壮性实践。
