Question

Is it possible, in either the jQuery API or the DOM, to check if an element exists on the page or not?

Consider these two variables:

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

Both will return a jQuery object containing a span element. Is there any way to tell that the first exists on the page, and the second one does not?

Answer 1

Try

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

Here are some more ways to do the same:

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

Or using the contains method that was built for this task. It only accepts DOM nodes, so we need to unwrap it from the jQuery object

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

A pure DOM way will be to use the Node.compareDocumentPosition method. In the above example,

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