jQuery: <IMG/> element on-the-fly

Question

Here is the problematic part of my code, run inside .each(function(){ });

$('img','<div>'+ed.selection.getContent({format: 'html'})+'</div>').each(function(){  
  $img=$('<img/>').attr('src',$(this).attr('src'));
  alert($('<p>'+$img+'</p>').html());
  if ($(this).attr('height').length>0){
    $img.attr('height',$(this).attr('height'));
  }
  if ($(this).attr('width').length>0){
    $img.attr('width',$(this).attr('width'));
  }
  alert($img.html());
});

First, i'm working with the selected tinyMCE content in html format which is fust fine as jQuery recognizes it properly. $img.html() returns empty value, not undefined but just blank. Tested both FF 3.6 and IE8. Can someone explain, please?

Answer 1

The html() function only returns the contents of the element. Since <IMG> is technically empty, you get an empty string.

If you had this:

<span>The text</span>

and you asked for $span.html(), you'd get just The text, without the enclosing tags.

Answer 2

.html() gives you the innerHTML of an element i.e. what's inside it. An <img> doesn't have anything inside it - it's an empty element.

You have the right idea by wrapping it and taking the innerHTML of that.

Answer 3

An image element doesn't have any inner HTML, therefore the method can't return any.

Answer 4

If you are interested in accessing the <img>'s content then have a look at Question number 298049