删除jquery中的元素然后追加一个新元素？

Question

我正在尝试从HTML中删除span元素，然后用新的span元素替换该元素。

查看工具示例的小提琴：http://jsfiddle.net/DCJ9X/

<div id="foo">
    <span>FadeOut</span>
</div>

<input id="go" type="button" value="lets go!" />

$('#go').click(function() {

    $('#foo span').fadeOut(500, function() {
        $(this).remove().parent().append('<span>FadeIn</span>').fadeIn(500);
    });

});

我一如既往地感谢您的帮助！

Answer 1

改为使用.replaceWith()：

    var $span = $('<span>FadeIn</span>');
    $(this).replaceWith($span);
    $span.fadeIn(500);

http://jsfiddle.net/DCJ9X/4/

或者在一条线上：

$(this).replaceWidth($('<span>FadeIn</span>').fadeIn(500));

Answer 2

这应该可以解决问题：

$('#foo span').fadeOut(500).replaceWith('<span>FadeIn</span>').hide().fadein(500);

Answer 3

好吧，如果你想保持你所拥有的更多或更少，这是有效的：

$('#go').click(function() {

    var $foo = $('#foo');
    $foo.find('span').fadeOut(500, function() {
        $foo.remove('span').append('<span>FadeIn</span>').fadeIn(500);
    });

});