How to add an HTML element in another HTML element in its constructor ?

Hi All,

I have a need to nest a DIV in another DIV and make it as a one component, so I want to do it in it's constructor: override it and create another element inside. How can I do that in a nice way?

thanks
andrew

Hi Andrew,

Did you tried this way,

..after create an objects of both the div elements and
contents inside div2 object...

You can merge two objects in this way..

div1.innerHTML = div2.toString();

I have not tried this one, but by assumption it may give you some solution.

regds,
naha

I would recommend to avoid putting code into the constructor (which is executed each time you create a new object) but apply the changes to the class prototype instead (this is how all AW classes are built) -

var MyClass = AW.HTML.DIV.subclass();

MyClass.create = function(){
    var obj = this.prototype;
    var child = new AW.HTML.DIV;
    obj.setContent("something", child);
}

var composite = new MyClass;
alert(composite);

create() is a special method of each class which is called when the first instance of the object of this class is created (lazy initialization). Inside this method you normally modify members of the class prototype.

If you really want to do something inside each instance constructor - here is the example -

var MyClass2 = AW.HTML.DIV.subclass();

MyClass2.create = function(){

    var obj = this.prototype;
    var _super = this.superclass.prototype;

    // constructor
    obj.init = function(arg){

        // calling parent constructor
        _super.init.call(this);

        alert("constructor called: " + arg);

        var child = new AW.HTML.DIV;
        this.setContent("something", child);

    }
}

var composite2 = new MyClass2("arguments");
alert(composite2);

Because the constructor for each class is generated automatically by the subclass() call - there is special method which is called from inside the generated constructor and which you can use instead of the constructor - init(). It also gets arguments passed to the actual constructor. And don't forget to call init() method of the superclass.

Hi Alex, thanks for reply,

I have some more questions. You are saying that create method is called once when first instance is created. So if I construct instance of another DIV in this method, there will be only one instance of it for all of the other objects of this class, right? What I need is that each instance of some MyDIV class to have another DIV inside, so I assume this solution would not work for me.

Also, what happens if I do this:
this.setContent("something", child);

How can I manipulate with this "something" ? where is it inserted in the HTML ? does it become an innerHTML of the outer object ?

what is I do this:

this.setContent("something1", child1);
this.setContent("something2", child2);
this.setContent("something3", child3);

are they inserted into innerHTML sequentially?

First question - yes and no. If you add static content to the prototype and later call getContent() from the new class instance - getContent() method will return the clone and not the original content object. You can modify it (the clone) without affecting other instances of the same class.

Second - yes, content objects are inserted into innerHTML in the same order as they were added. Changing this order is not possible (yet).

You can also add strings or functions, not only AW objects.