how to get actual content of an object after being replaceWith('something') in jquery

Question

I have this code

$(document).ready(function(){
    $('.selector').click(function(){
        obj = $(this);
        obj.replaceWith('<div class="size">whats up man ??!</div>');
        alert(obj.html());
    });
});

I want to get the new content of 'obj' that has been 'replaceWith'

but,

I get the old content instead ...

how do I get the actual content of 'obj' ???

my intention is to access the new 'obj'

$('.selector').click(function(){
            var obj = $(this),
            repl = $('<div class="size">whats up man ??! <span class="medium"></span></div>');
            obj.replaceWith(repl);
            alert(obj.find('span').attr('class')); //this will print 'undefined'
});

I want to print the class name of the 'span' which is 'medium'

Answer 1

Your updated method is the correct one, just needs a tweak like this:

$('.selector').click(function(){
  var obj = $(this),
      repl = $('<div class="size">whats up man ??! <span class="medium"></span></div>');
  obj.replaceWith(repl);
  alert(repl.find('span').attr('class')); 
});

You can test it out here. The important change is the repl.find() to look in the new element instead of the old one.

Answer 2

why do you want to do that? you know what you replaced it with....

$(document).ready(function(){
    $('.selector').click(function(){
        var obj = $(this);
        var replacement = $('<div class="size">whats up man ??!</div>');
        obj.replaceWith(replacement);
        alert(replacement.html());
    });
});