4

I'm trying to somehow override the constructor of HTMLElement (specifically HTMLDivElement), so that whenever any are created by whatever means, I can run some custom logic.

Obviously this doesn't work:

HTMLDivElement.prototype.constructor = function()
{
  alert('div created!');
}

Is there a way to pull this off? Even if there was a way to get some sort of event/trigger when new elements where created (ones not part of the page's source HTML), that would be helpful.

EDIT: Maybe there is something we could do with Mozilla's watch/unwatch methods to watch for a change?

6
  • 2
    I don't think it is possible, but I would like to know how if it is.
    – Quentin
    Jul 22, 2009 at 16:00
  • Are you doing this for a specific browser? Because ignoring your constructor issue - those DOM objects are exposed in IE, for example. Jul 22, 2009 at 16:10
  • The constructor thing needs to work in Firefox 3.0 and lower as well as IE8. But right now I'm just trying to get Firefox going and will deal with IE8 later. Jul 22, 2009 at 16:27
  • also see stackoverflow.com/questions/1121831/… Aug 10, 2009 at 11:55
  • Do you have a specific reason, why you don't simply use a wrapper script? Like, 'I use third party apps, and their calls should be intercepted, too.' ...
    – Boldewyn
    Aug 10, 2009 at 11:56

6 Answers 6

9

I’m going to Hell for this:

document.createElement = (function (fn)
{
    return function (tagName)
    {
        var elem = fn.call(document, tagName);
        alert('just created a new ' + elem.tagName);
        return elem;
    };
})(document.createElement);        
2
  • 2
    Nate...funny you would post that, it's what I had come up with after hacking around a bit...although I was too shy to post it :) Aug 14, 2009 at 14:38
  • 1
    Of course, this won't work for elements created by dom parser (either upon loading page or setting innerHTML). Nov 22, 2013 at 22:56
2

If you could consider using jQuery there is a plugin called Livequery which lets you trigger events on not yet created elements. So your example above could be written like this:

$("div").livequery('load', function(event) { 
    alert('div created!'); 
}); 

Note that I have not tried livequery myself, but I'm guessing since there are no answers to this question.

Hope it helps!

3
  • 2
    He was asking to pure JavaScript! Please don't use jQuery until he asks for it. Yes, DOM is ugly sometimes but jQuery is EVIL.
    – m93a
    Sep 23, 2013 at 16:16
  • 3
    @m93a: I know that it's not what he specifically asked for, so I added that disclaimer in the beginning of the answer to clarify that. I also suggested looking at other answers. Also: it's from 2009, so I don't think jQuery was considered quite so evil in that pre-mobile world. Sep 24, 2013 at 20:37
  • 2
    The vanilla approach would be Mutation Observers (that's what livequery uses).
    – Ben Davis
    Jul 26, 2015 at 16:34
1

The standard way to do this is to use Mutation Observers

0

If you don't mind using prototype.js, this answer may help.

$('placeholder').insert(new Element("img", { id:'something', src:myImage, onload:'(' + function() { alert("MOO"); } + ')()' }));

0

i'm not sure you can make a 'hook' on every call of every new object in javascript... but i'm quite sure you can make your own framework where everything will be catchable.. i recommend looking at: http://code.google.com/p/joose-js/

or easy to go through article: http://www.sitepen.com/blog/2008/03/18/javascript-metaclass-programming/

python has __new__ and __init__ as steps to construct the classes.. it would be good to check how javascript is dealing with the construction of new objects.

0

Aren't you controlling the changing/creation of said elements? Why can't you manually do whatever you want to after each element is created?

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.