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

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.