Problems with Element.appendChild and Element.appendTo

[radubrehar]

Hello,

i have some problems with Element.appendChild and Element.appendTo:

I have a simple html page (with an empty body) and the following JS code:

Ext.onReady(function(){
console.log("ready");

var el = new Ext.Element("<div>hello</div>");
var b = Ext.getBody();

//the following doesn't work
b.appendChild(el);

//I also tried - also doesn't work
el.appendTo(b);

})

Could anyone make some light here?
Thank you.

[hendricd]

Hello,

i have some problems with Element.appendChild and Element.appendTo:

I have a simple html page (with an empty body) and the following JS code:
Could anyone make some light here?
Thank you.

The constructor for Ext.Element is a string (an elementId), not a markup fragment.
Review the API Docs, for Ext.Element a bit closer:

Ext.onReady(function(){
            console.log("ready");
    
   var b = Ext.getBody();

   //raw markup
   var div = b.insertHTML('afterBegin', "<div>hello</div>", true);

    //or DomHelper config
   var div = b.createChild({ tag: 'DIV', html: 'hello' });
    
});

[radubrehar]

Thanks a lot!
The documentation seemed to me a bit misleading on this topic, but with your point now it seems clearer.

Yet, if this is the case (and it is) it means the following are the same:

new Ext.Element('header');
Ext.Element.get('header');

And I see no real point for this.

I have also looked for a way to get the html of an element (not the innerHTML). Is there a way?

[hendricd]

Thanks a lot!
The documentation seemed to me a bit misleading on this topic, but with your point now it seems clearer.

Yet, if this is the case (and it is) it means the following are the same:

new Ext.Element('header');
Ext.Element.get('header');

And I see no real point for this.

I have also looked for a way to get the html of an element (not the innerHTML). Is there a way?

@radubrehar --

var el = new Ext.Element('header');
var el = Ext.Element.get('header');
var el = Ext.get('header');

all return the same Ext.Element.instance, just different routes (and reasons).

Regarding the markup for a DOM element:

IE is the only that supports outerHTML. In order to get that from other browsers, you'd have to clone the node in question, and insert THAT into a bogus DIV Element and take its innerHTML.

Is there a compelling reason that you need the inclusive markup text for a DOM Element?