jQuery - 检查 DOM 元素是否已经存在
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5538961/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery - Check if DOM element already exists
提问by Dan
I am trying to add some form elements dynamically via Ajax with jQuery. I want to make sure that I don't create the same element twice, so I only want to add it if it hasn't already been added to the DOM.
我正在尝试使用 jQuery 通过 Ajax 动态添加一些表单元素。我想确保我不会创建相同的元素两次，所以我只想在它尚未添加到 DOM 的情况下添加它。
All of my elements have a unique CSS id, for example:
我的所有元素都有一个唯一的 CSS id，例如：
$('#data_1')
I am using the following to check if the element already exists:
我正在使用以下内容来检查元素是否已存在：
if ($('some_element').length == 0) {
//Add it to the dom
}
However, it only works for elements which were already part of the page when it first loaded.
但是，它仅适用于首次加载时已经是页面一部分的元素。
How do I also check for elements which were dynamically created after the page was loaded?
我还如何检查页面加载后动态创建的元素？
Any advice is appreciated.
任何建议表示赞赏。
Thanks.
谢谢。
回答by rahul
This should work for all elements regardless of when they are generated.
这应该适用于所有元素，无论它们何时生成。
if($('some_element').length == 0) {
}
write your code in the ajax callback functions and it should work fine.
在 ajax 回调函数中编写您的代码，它应该可以正常工作。
回答by Collector
This question is about whether an element exists and all answers check if it doesn't exist :) Minor difference but worth mentioning.
这个问题是关于一个元素是否存在，所有答案都检查它是否不存在:) 细微差别但值得一提。
Based on jQuery documentationthe recommended way to check for existence is
基于jQuery 文档，推荐的检查存在的方法是
if ($( "#myDiv" ).length) {
// element exists
}
If you prefer to check for missing element you could use either:
如果您更喜欢检查缺少的元素，您可以使用：
if (!$( "#myDiv" ).length) {
// element doesn't exist
}
or
或者
if (0 === $( "#myDiv" ).length) {
// element doesn't exist
}
Note please that in the second option I've used === which is slightly faster than == and put the 0 on the left as a Yoda condition.
请注意，在第二个选项中，我使用了 === ，它比 == 稍快，并将 0 放在左侧作为Yoda condition。
回答by sree
Just to confirm that you are selecting the element in the right way. Try this one
只是为了确认您正在以正确的方式选择元素。试试这个
if ($('#some_element').length == 0) {
//Add it to the dom
}
回答by Ishan Jain
if IDis available - You can use getElementById()
如果ID可用 - 您可以使用getElementById()
var element = document.getElementById('elementId');
if (typeof(element) != 'undefined' && element != null)
{
// exists.
}
OR Try with Jquery -
或尝试使用 Jquery -
if ($(document).find(yourElement).length == 0)
{
// -- Not Exist
}
回答by Thielicious
(()=> {
var elem = document.querySelector('.elem');
(
(elem) ?
console.log(elem+' was found.') :
console.log('not found')
)
})();
If it exists, it spits out the specified element as a DOM object. With JQuery $('.elem')it only tells you that it's an object if found but not which.
如果存在，它会将指定的元素作为 DOM 对象吐出。使用 JQuery $('.elem')，它只告诉你它是一个对象，如果找到，而不是哪个。
回答by Inzmam ul Hassan
No to compare anything, you can simply check that by this...,.
不比较任何东西，你可以简单地通过这个检查......，。
if(document.getElementById("url")){ alert('exit');}
if($("#url")){alert('exist');}
you can also use the html() function as well like
您还可以使用 html() 函数以及
if($("#url).html()){alert('exist');}
回答by Markoj
In this case, you may want to check if element exists in current DOM
在这种情况下，您可能需要检查当前 DOM 中是否存在元素
if you want to check if element exist in DOM tree (is attached to DOM), you can use:
如果要检查 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
}
回答by Dipti S
if ($('#some_element').length === 0) {
//If exists then do manipulations
}
回答by oliiix
Also think about using
还考虑使用
$(document).ready(function() {});
Don't know why no one here came up with this yet (kinda sad). When do you execute your code??? Right at the start? Then you might want to use upper mentioned ready() function so your code is being executed after the whole page (with all it's dom elements) has been loaded and not before! Of course this is useless if you run some code that adds dom elements after page load! Then you simply want to wait for those functions and execute your code afterwards...
不知道为什么这里没有人想出这个（有点伤心）。你什么时候执行你的代码？？？一开始就对吗？然后你可能想使用上面提到的 ready() 函数，这样你的代码就会在整个页面（以及它的所有 dom 元素）被加载之后而不是之前被执行！当然，如果您运行一些在页面加载后添加 dom 元素的代码，这将毫无用处！然后你只想等待这些函数并在之后执行你的代码......
