如何区分生成元素和选定元素？

Question

是否可以在jQuery API或DOM中检查页面上是否存在元素？

考虑这两个变量：

var selected = $('span#mySpan');
var created = $('<span id="mySpan">Testing</span>');

两者都将返回包含span元素的jQuery对象。有没有办法告诉页面上第一个存在，第二个不存在？

Answer 1

尝试

$(created).parents("html").length

以下是其他一些方法：

$(document).find(created).length
$(created).parents(document).length

或使用为此任务构建的contains方法。它只接受DOM节点，因此我们需要从jQuery对象中解包它

$.contains(document, created.get(0))

纯DOM方式将使用Node.compareDocumentPosition方法。在上面的例子中，

// get the DOM node
var createdNode = created.get(0);
var position = document.compareDocumentPosition(createdNode);
var isNotInDocument = (position & Node.DOCUMENT_POSITION_DISCONNECTED) != 0;

Answer 2

除了对底层DOM api的某种扩展之外，我能想到这样做的唯一方法是获取整个DOM树的副本，然后对其进行比较。

在您的示例中，您的第二个跨度不会没有父级吗？在有效的HTML中，span应始终具有父级。假设有效的HTML / XHTML，这样的规则可能很有用。