jquery - 切换内容从一个 div 到另一个 div 的移动

Question

到处搜索，但找不到这个问题的答案。当我单击一个按钮时，我希望内容从一个 div 移动到另一个 div，然后再次单击以返回。可以使最初的举动没有问题，但它的回归。

到目前为止，这是我的代码...

$(document).ready(function(){
    $(function(){$('#button').click(function() {
       $(this).val() == "Move Content" ? initial_move() : move_back();
        });
    });

    function initial_move() {
        $('#button').val("Move Back");
        $("#two").append($("#toggle_txt").html());  
        $('div#one #toggle_txt').remove();
    };

    function move_back() {
        $('#button').val("Move Content");
        $("#one").append($("#toggle_txt").html());  
        $('div#two #toggle_txt').remove();
    };
});


<input type="button" value="Move Content" id="button" /><br/><br/>

<div id="one">
    <p>Div One permanent text</p>
    <p id="toggle_txt">Text to toggle between the two</p>
</div>
<br/>
<div id="two">
    <p>Div Two permanent text</p>
</div>

http://jsfiddle.net/eBuAz/

我不明白为什么这段代码不应该工作。非常感谢任何帮助。

谢谢

Answer 1

当你这样做

$('div#one #toggle_txt').remove();

您实际上是从 DOM 中删除它，因此没有要添加回的文本。

Answer 2

jQuery(document).ready(function ($) 
{
    $(function(){$('#button').click(function()
    {
        $(this).val() == "Move Content" ? initial_move() : move_back();
    });
    });

    function initial_move() {
        $('#button').val("Move Back");
        var toggle = $("#toggle_txt");
        $("#two").append(toggle).html();
        $('div#one #toggle_txt').remove();
        toggle.attr('id', "toggle_txt");
    };

    function move_back() {
        $('#button').val("Move Content");
        var toggle = $("#toggle_txt");
        $("#one").append(toggle).html();  
        $('div#two #toggle_txt').remove();
        toggle.attr('id', "toggle_txt");
    };
});