ReplaceWith on hidden elements then showing in orginal positions, not in the position of their target

Question

Link: http://jsfiddle.net/7GGeX/24/

Click on the links in 1,2,3 order and you'll see why I'm confused.

Does using a function inside replaceWith negate the positioning of the replacement?

$(document).ready(function () {
    $(".click1").click(function () {
        $("#one").replaceWith(function () {
            $('#replace1').show();
        });
        return false;
    });

Thanks for the help!

Answer 1

You need to return the value you want to use as the replacement.

$("#two").replaceWith(function() {
      // return the element
    return $('#replace2').show();
});

or don't pass a function:

$("#two").replaceWith($('#replace2').show());

Since you weren't returning anything explicitly, the replace div was being shown, then undefined was returned, effectively replacing the original with nothing.