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'

Henceforth

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.

Whorl

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());
    });
});

Lymphoblast

thx andrew, my intention is to have access to manipulate everything inside the actual 'obj', $('.size').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 get the class name from the actual 'obj' }); – Henceforth

but you know you just assigned size to it, so why aren't just just alerting size? just do: replacement.find('span').attr('class') if you really must – Lymphoblast

yes andrew, your code has solved my question in the first place. but I think I missunderstood. here is the final result jsfiddle.net/HCXaK/1 – Henceforth