get the html element after created

Question

i'm creating a img when i click in a input, then i get the html or anyelse from the created img.

but i dont know why this is not working!

always return null

my js:

$("#click").click(function(){
    var $imgDone = $('<img/>').attr('src', 'someImage/insomewhere.jpg');
    $(this).after($imgDone);
    setTimeout(function(){
          alert($(this).next().html());
    }, 1000);
});

i mande a exp.: Demo

Besides what others are explaining, calling `.html()` on an `img` element will not return anything anyways. It is a simple tag, has no content. — kapa, Jun 27 '11 at 18:08
Out of curiosity, why do you need to find the `` with `$(this).next()` when you've already found it -- `$imgDone`? — Jonathan Lonowski, Jun 27 '11 at 18:13
@Jonathan Lonowski: becase i have more then one img and diferent places. — Ricardo Binns, Jun 27 '11 at 18:15
but the variable `$imgDone` when accessed in the callback will still be the one you just created. — Alnitak, Jun 27 '11 at 18:42

Alnitak · Accepted Answer · 2011-06-27T19:06:04.490

this is pointing at the wrong place in setInterval.

The this you have in the outer scope isn't the same as the this that you get inside the callback, which will usually be the window object, since:

setInterval(f, t)

is actually

window.setInterval(f, t);

To solve the problem, take a copy of this in the outer scope:

$("#click").click(function(){
    var self = this;
    var $imgDone = $('<img/>').attr('src', 'someImage/insomewhere.jpg');
    $(this).after($imgDone);
    setTimeout(function(){
          alert($(self).next().html());
    }, 1000);
});

For efficiency, as @T.J. Crowder suggests, you could actually use the jQuery constructor to take that copy, and save yourself a few calls to jQuery:

$("#click").click(function(){
    var $this = $(this);
    var $imgDone = $('<img/>')
         .attr({src:  'someImage/insomewhere.jpg'})
         .insertAfter(this); // NB: not $this here

    setTimeout(function(){
          alert($this.next().html());
    }, 1000);
});

The other problem is that .html() shows the inner contents of tags, not the tags themselves, and your img tag has no inner contents.

There doesn't appear to be any builtin jQuery method that returns the actual whole HTML of an element. To do that you'd need to put your element into something else (e.g. a <div>) and then take the .html() of that.

Here's a plugin I just made that does this, inspired by something I found via Google:

(function($) {
    $.fn.outerhtml = function() {
        return $('<div/>').append(this.clone()).html();
    };
})(jQuery);

Demo of it in use on your problem at http://jsfiddle.net/alnitak/qaSmS/

+1, but just start with `var $this = $(this);` and then use that throughout. That removes an unnecessary call to `$()` while creating the variable for the closure, and increases clarity by referring to same thing in *one* way rather than...two? three? — T.J. Crowder, Jun 27 '11 at 18:10

score 2 · Answer 2 · answered Jun 27 '11 at 18:06

2

because the timeout function is called form a different context, this no longer applies.

$("#click").click(function(){
    var $imgDone = $('<img/>').attr('src', 'someImage/insomewhere.jpg');
    $(this).after($imgDone);
    myImg = $(this);
    setTimeout(function(){
          alert($(myImg).next().html());
    }, 1000);
});

answered Jun 27 '11 at 18:06

hughes

5,595
3
39
55

2

No need to call `$()` on `myImg` again. – T.J. Crowder Jun 27 '11 at 18:09

score 0 · Answer 3 · answered Jun 27 '11 at 18:07

The ".html()" method gets the contents of something, not including the markup for the container itself.

The other answers indicating that the use of this in the timeout handler are correct, of course. When you fix that, however, the alert will just be empty.

get the html element after created

3 Answers3

Linked