jquery - 如何替换div中的信息

Question

当我使用 jQuery 单击一个 div 时，我试图用另一个 div 替换它，但我做不到，我不知道是否需要在一个 div 上使用 hide 属性。

这是代码

<div id="prepersonal">this is a test 1</div>
<div id="personal">this is a test 2</div>

这是CSS

#prepersonal {
   width: 330px;
   height: 330px;
   border-radius: 5px;
   background-color: #FF6801;
   color: #FFFFFF;
   font-family: Tahoma;
   padding-top:7px; 
}

#personal {
   width: 330px;
   height: 330px;
   border-radius: 5px;
   background-color: #FF6801;
   color: #FFFFFF;
   font-family: Tahoma;
   padding-top:7px;
}

有人可以知道答案吗？

Answer 1

以下内容将其中的内容替换为已编辑div的内容click：

$(function(){
    $('#prepersonal').on('click', function(){
        $('#personal').html(this.innerHTML);
    });
});

---

在您发表评论后：

$(function(){
    var a = $('#prepersonal'), b = $('#personal');

    // you can remove this call to hide by initially
    // hiding the div using display:none; in CSS
    b.hide();

    a.on('click', function(){
        toggledivs();
    });
    b.on('click', function(){
        toggledivs();
    });

    function toggledivs(){
        a.toggle();
        b.toggle();  
    };
});

http://jsfiddle.net/f6r82/

Answer 2

$(function() {
    $("#prepersonal").click(function(){
        $("#personal").html($("#prepersonal").html()); //You can use the text() method instead of html if you need only the text
        $("prepersonal").css("display", "none");
    });
);

Answer 3

$(function(){
$('#prepersonal').on('click', function(){
    $(this).replaceWith($('#personal'));
});
});