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.

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