Results 1 to 5 of 5

Thread: DOM custom property problem

  1. #1
    Join Date
    Jul 2011

    Unhappy DOM custom property problem

    Here it is:
    subClass.prototype = document.createElement( 'div' );
    subClass.prototype.constructor = subClass;
    function subClass() {
    	this.x = 5;
    var divTested = new subClass;
    divTested.id = 'test';
    alert(divTested.x); // works (result is 5)
    $('#test').click(function() {alert(this.x);}); // doesnt work!
    $('#test').css({'height': 30, 'width': 50, 'background': 'red'});

  2. #2
    Join Date
    Feb 2003
    Michigan, USA
    Browsers probably aren't handling the DOM element as a prototype object very well, besides, the subClass class is not actually a sub class of an HTMLDivElement, so the appendChild method call is probably failing.

    You've only created a fake sub class. If browsers properly supported it, you might do:
    function MyDiv() {}
    MyDiv.prototype = {
      __PROTO__: HTMLDivElement.prototype
    The __PROTO__ property sets up inheritance in JavaScript, which has prototype based objects rather than class based objects. The __PROTO__ property is the prototype chain that JavaScript uses for property lookups when you do something like "foo.bar" in JavaScript.

  3. #3
    Join Date
    Jul 2011

    Unhappy not successful

    I dont know how to implement your advise, i still get this error:
    uncaught exception: [Exception... "Could not convert JavaScript argument arg 0 [nsIDOMHTMLBodyElement.appendChild]" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)" location: "JS frame :: file:///C:/Documents%20and%20Settings/test.htm :: <TOP_LEVEL> :: line 27" data: no]
    I am trying it in firefox4.0.1

    It seems to me that appendChild doesnt support own properties of elements.

    Or could you send me working example? Where you create div element, than you give it own property and after it you place it into DOM and finaly you read that property from DOM element. (i have bypass through custom attributes, but it makes code messy, custom property seems to be more elegant solution, but I cant make it works)

  4. #4
    Join Date
    Jul 2003
    The City of Roses
    Hi, luckylooke. Your prototype chains look correct to me. And in fact, the inheritance does work to some degree. For instance, you can access divTested.nodeName. But, nonetheless, appendChild doesn't like it. And after googling around, I found many other people trying the same sort of thing, but no solutions for any of them.

    Unfortunately, we may have to accept that this just doesn't work, and for no apparent reason either.

    The closest alternative you can do is to copy your custom properties into a new DIV object.

    function subClass() {
        var self = document.createElement('div');
        // copy custom properties into the div
        for (var property in subClassCustomProperties) {
            self[property] = subClassCustomProperties[property];
        // anything else you want to add
        self.x = 5;
        return self;
    var subClassCustomProperties = {
        customMethod: function () {
    var divTested = subClass(); // returns a modified div element
    divTested.id = 'test';
    Last edited by Jeff Mott; 07-18-2011 at 10:36 AM. Reason: Missing "var"

  5. #5
    Join Date
    Jul 2008
    urbana, il
    i realize the code below is "cheating", but i think it accomplishes what the OP was trying to do. i like how it has closure in the methods and fits in one little new-less constructor.
    the problem with re-using a single element on prototype is that when you call append, it actually appends the prototype div instead of the newly instantiated object. (silent fallback?)

    this means you can only use it once, and it's spent.
    so, you really need a fresh element each time.
    furthermore, document.createElement does more than just new HTMLDivElment; it syncs up namespaces and native dom properties, allowing you to use the created elementObect in the document.

    considering this, you have two or three main options.
    1. custom object, loop dupe'd props (show by mott)
    2. native div, apply() dupe'd props (show below)
    3. regular old factories (you know the drill)

    function subClass(strContent) {
    	if(!this.nodeName){//re-cast with fresh div:
              var t=document.createElement( 'div' );
             return t;
       //regular constructor code goes below:
       this.x = Math.random()*9e9;
       this.onclick=function() {alert(this.x + " - " + strContent );}; 
    }//end subClass()
    var divTested = subClass("Hello World");
    Last edited by rnd me; 07-19-2011 at 01:40 AM.
    Create, Share, and Debug HTML pages and snippets with a cool new web app I helped create: pagedemos.com

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center