Check if DOM Element exists automatically before appending in JQuery

Question

Basically, I want a check to run every time I append or prepend to the DOM that the element I am putting in does not exist. I am making sophisticated applications and on occasion have made duplicate elements causing events to not trigger properly.

I don't want to have to run this check manually each time I change the DOM, I would like it to be ran automatically when the prepend, or append functions are called. Is there an event I could listen for when a function is called?

I wouldn't use this check when the application is released because I realize that it could severely hamper performance, but during development it would be very valuable.

Do want this check to be on the basis of the element ID, or...? — nnnnnn
– nnnnnn, Commented Aug 9, 2011 at 23:42

gilly3 · Accepted Answer · 2011-08-09 23:41:15Z

Just override jQuery.fn.append:

(function() { var append = jQuery.fn.append; jQuery.fn.append = function() { var elemExists = ...; if (!elemExists) { append.apply(this, arguments); } }; })();

Do the same for jQuery.fn.prepend. This works nicely because the only change you have to make for production is to exclude this function.

In addition, nowadays you may use the Node.contains() method. Refs: How can I check if an element exists in the visible DOM?.

Collectives™ on Stack Overflow

Check if DOM Element exists automatically before appending in JQuery

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related