jQuery - 检查 DOM 元素是否已经存在答案

【问题标题】：jQuery - Check if DOM element already existsjQuery - 检查 DOM 元素是否已经存在
【发布时间】：2011-04-04 13:12:33
【问题描述】：

我正在尝试通过 Ajax 和 jQuery 动态添加一些表单元素。我想确保我不会两次创建相同的元素，所以我只想在它尚未添加到 DOM 时添加它。

我所有的元素都有一个唯一的 CSS id，例如：

$('#data_1')

我正在使用以下内容来检查元素是否已经存在：

if ($('some_element').length == 0) {
    //Add it to the dom
}

但是，它仅适用于首次加载时已经是页面一部分的元素。

如何检查页面加载后动态创建的元素？

感谢任何建议。

谢谢。

【问题讨论】：

您的代码适用于 DOM 中的所有元素，通过 JavaScript 加载或呈现的 HTML。
上面使用.length的方法应该适用于任何东西，无论是页面加载还是动态创建。
好的，我想我一定是在某个地方出错了。
然后让我们看看你的其余代码
你能不能只做 if ($('some_element').length) { // code }

标签： jquery

【解决方案1】：

这应该适用于所有元素，无论它们何时生成。

if($('some_element').length == 0) {
}

在 ajax 回调函数中编写代码，它应该可以正常工作。

【讨论】：

如果使用严格比较“===”而不是“==”会更好。只是一个最佳实践。

【解决方案2】：

这个问题是关于一个元素是否存在，所有答案都检查它是否不存在:) 差异不大但值得一提。

基于jQuery documentation，推荐的检查存在的方法是

if ($( "#myDiv" ).length) {
    // element exists
}

如果您更喜欢检查缺失的元素，您可以使用：

if (!$( "#myDiv" ).length) {
    // element doesn't exist
}

或

if (0 === $( "#myDiv" ).length) {
    // element doesn't exist
}

请注意，在第二个选项中，我使用了 ===，它比 == 稍快，并将左侧的 0 作为Yoda condition。

【讨论】：

【解决方案3】：

只是为了确认您以正确的方式选择元素。试试这个

if ($('#some_element').length == 0) {
    //Add it to the dom
}

【讨论】：

【解决方案4】：

猜你忘了将项目附加到 DOM。

查看HERE。

【讨论】：

【解决方案5】：

如果ID 可用 - 您可以使用getElementById()

var element =  document.getElementById('elementId');
  if (typeof(element) != 'undefined' && element != null)
  { 
     // exists.
  }

或尝试使用 Jquery -

if ($(document).find(yourElement).length == 0) 
{ 
 // -- Not Exist
}

【讨论】：

这在所有给定的答案中效果最好。

【解决方案6】：

(()=> {
    var elem = document.querySelector('.elem');  
    (
        (elem) ? 
        console.log(elem+' was found.') :
        console.log('not found')
    )
})();

如果存在，它将指定元素作为 DOM 对象吐出。使用 JQuery $('.elem') 它只会告诉您如果找到它是一个对象，而不是哪个。

【讨论】：

【解决方案7】：

在这种情况下，您可能需要检查当前 DOM 中是否存在元素

如果要检查 DOM 树中是否存在元素（附加到 DOM），可以使用：

var data = $('#data_1'); 
if(jQuery.contains(document.documentElement, data[0])){
    // #data_1 element attached to DOM
} else {
    // is not attached to DOM
}

【讨论】：

与其他答案相比，我看不出这在任何方面都更好。
$(document).find(yourElement).length -- 检查元素是否存在于“内存”中，它不必附加到 dom jQuery.contains(document.documentElement, data[0 ]) -- 检查元素是否附加到 DOM
$('#data_1').length 如果元素附加到 dom 将返回 1，否则返回 0。如果有任何其他结果，那就是选择器是在 DOM 更改之前生成的。因此，只需在需要检查它是否存在于 dom 时调用 $('#data_1') 选择器就可以完成这项工作 - 使用 contains() 毫无意义。

【解决方案8】：

if ($('#some_element').length === 0) {
    //If exists then do manipulations
}

【讨论】：

解释你的答案逻辑会有所帮助

【解决方案9】：

没有比较，你可以简单地通过这个来检查......，。

if(document.getElementById("url")){ alert('exit');}
if($("#url")){alert('exist');}

你也可以像使用 html() 函数一样

if($("#url).html()){alert('exist');}

【讨论】：

【解决方案10】：

也考虑使用

$(document).ready(function() {});

不知道为什么这里还没有人想出这个（有点难过）。你什么时候执行你的代码？？？刚开始？然后您可能想要使用上面提到的 ready() 函数，以便在整个页面（及其所有 dom 元素）加载之后而不是之前执行您的代码！当然，如果您运行一些在页面加载后添加 dom 元素的代码，这将毫无用处！然后你只是想等待这些函数然后执行你的代码......

【讨论】：