Check if DOM element exists automatically before adding to jQuery

Question

Basically, I want the check to run every time I add or add to the DOM that the element I insert does not exist. I make complex applications and sometimes make duplicate elements so that events do not fire properly.

I don’t want to run this check manually every time I change the DOM, I would like it to start automatically when calling prepend or append functions. Is there an event that I could listen to when a function is called?

I will not use this check when the application is released, because I understand that this can seriously interfere with work, but it would be very useful during development.

Answer 1

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 well, because the only change you have to make for production is to exclude this function.