Tutorial :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?


Solution: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.


Solution:2

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


Solution:3

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.


Solution:4

I know this is an old question that's been answered, but I thought I might add for anyone that's seeing this from search results that no element has innerHTML before it's actually appended to the document tree and in the case of MooTools 'inject'ed. And the real answer is obviously that an image tag has no innerHTML as stated above.


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »