javascript - 如何检查 DOM 中是否存在元素

Question

我正在创建一个 jQuery 插件，它将根据实例的数量在 DOM 中创建很多元素...它的工作原理如下:

$(document).ready(function(){
    $("#register-trigger").modal();
});
(function($){
    $.fn.modal = function(a){
        return this.each(function(){
            var el = $(this),
                element = $('<div class="modal close"></div>');
            $("body").prepend(element);
        });
    };
}(jQuery));

但我需要知道该元素是否已插入到页面中。如果未插入，我将使用变量中的元素，否则我将使用页面上已插入的元素...但是如何检查这一点？

如果我使用下面的代码，就会说该元素已经存在...

(function($){
    $.fn.modal = function(a){
        return this.each(function(){
            var el = $(this),
                element = $('<div class="modal close"></div>');
            //This will return 1, same as true
            console.log(element.length);
        });
    };
}(jQuery));

我需要什么？

if( already inerted into the page ){
    modalOpen();
} else{
    modalCreate();
}

希望你能理解。谢谢。

---

编辑:如果未附加元素，我需要返回 false...

Answer 1

element = $('<div class="modal close"></div>');
console.log(element.length);

这将始终为 1，因为您刚刚将一些内容放入 element 中。它不会告诉您有关该元素是否在 DOM 中的任何信息。

相反，您可以使用类似 $.contains 的内容:

if ( $.contains( $( 'body' )[0], element ) {
    // the element has been added
} else {
    // the element has not been added
}

更正:我的第一个版本有一个错误，$.contains 需要 DOM 元素作为第一个参数，而不是 jQuery 对象。

文档:http://api.jquery.com/jQuery.contains/