MooTools: How to get innerHTML of element?

Question

I've created an element as shown:

  var imageElement =  new Element('img', {
                    'src': item.Url,
                    'alt': item.Id,
                    'height': height + 'px',
                    'width': width + 'px', 
                    'styles': {
                        'padding-left': paddingLeft + 'px',
                        'padding-top': paddingTop + 'px'
                    }
                });

When I put a break point in to bring up a debugger and see what imageElement.get('html') returns, it's an empty string.

Why might this be? Isn't that how you're suppose to get the innerHTML?

EDIT: Oh, how do I get its HTML then?

Answer 1

Image elements are singleton tags; they don't have inner HTML.

Answer 2

innerHTML is, as the name implies, the HTML inside the element, ie. its contents. There is no content in an <img> as it is an empty element by definition.

In IE you also get outerHTML. No good cross-browser, but can be useful for debugging. Otherwise you would be limited to eg. appending the image into an empty div and getting the innerHTML of the div.

                'height': height + 'px',
                'width': width + 'px', 

Unlike CSS there is no unit for HTML width/height, these properties are plain integers.

Answer 3

I'm unsure why would you want the IMG's HTML when you can access it via its Object, but here you are:

HTML:

<div id="image-wrap"></div>

MooTools:

var imageElement =  new Element('img', {
   'src': item.Url,
   'alt': item.Id,
   'height': height,
   'width': width, 
   'styles': {
       'padding-left': paddingLeft + 'px',
       'padding-top': paddingTop + 'px'
   }
}).inject($('image-wrap'));

console.log(imageElement.getParent().get('html'));

You can also create the wrapping element on-the-fly and then fetch its contents.