javascript - jquery append 移动元素后，如何还原此元素原来的位置

Question

jquery的append方法可以移动元素，例如append($('#a'))。
但是，移动元素后，想把$('#a')这个元素还原到原来的位置，该如何操作

Answer 1

我想到的方法是在移动的元素上加个标记，标记他从哪来的。

html

<p id="box1" style="width: 100px; height: 50px; background-color: yellow;" >
  <a class="a" href="javascript:">点击</a>
</p>
<p id="box2" style="width: 100px;height: 50px;background-color: green;" >
  <a class="a" href="javascript:">点击</a>
</p>
<p id="box3" style="width: 100px;height: 50px;background-color: red;">
</p>

js

$(function(){
    $('#box1,#box2').click(function(){
        $(this).find('.a').data('from', $(this));
        $('#box3').append($(this).find('.a'));
      });
      $('.a').click(function(){
        if($(this).data('from')){
            $(this).data('from').append(this);
        }
      });
});

Answer 2

append是向每个匹配的元素内部追加内容。append（）中的参数是添加的html内容，没看懂你所谓的移动元素为何物？

Answer 3

1：append() after() prepend() ==方法， 将移动后的#a 移动回去， 需要合理运用方法和选择器
2：另外的实现， clone #a， 原来的#a 隐藏， 移动的话， 显示出原来的#a，新的#a 隐藏或者删除