insertAfter，然后刪除上一個元素

Question

通過一段應該進行簡單的DOM操作的代碼來獲得一些奇怪的行為：

b.detach();
b.insertAfter(a);
a.remove();

最初，HTML看起來像

<a>
  <b> </b>
</a>

（如果重要，我正在使用b.wrap('<a></a>')來構建它）

代碼運行后它應該移動b后a ：

<a></a>
<b></b>

然后取出a ：

<b></b>

但事實並非如此。 相反， a保留在那里， b消失了。 有什么想法可能有問題嗎？

我嘗試使用after()代替，反轉參數，但得到相同的結果。

Answer 1

刪除b.detach（）b.insertAfter（a）; 將移動它

Answer 2

我不確定您的意思，如果嘗試的話，它會以您想要的方式工作：

http://jsfiddle.net/8wy7v/

HTML：

<div id="test">
    <a>
        Test <b>Test</b>
    </a>
</div>

<button id="change_dom">manipulate</button>
<br />
<textarea id="result"></textarea>

JS：

$(document).ready(function(){
    $('#change_dom').click(function(){
        var a = $('a'),
            b = $('b');

        b.detach();
        b.insertAfter(a);
        a.remove();

        $('#result').val($('#test').html());
    });
});

更新：

這是在此提琴中描述的場景中可以做到的方式： http : //jsfiddle.net/8wy7v/1/

var list = b.parents('ul')
b.insertAfter(list);
list.remove();

Answer 3

原因是wrap確實會克隆元素-因此a所引用的a實際上不會包含b 。 順便說一句， detach是多余的，因為將元素插入DOM中的其他位置時，元素將被自動刪除。

因此，要獲取要插入的a ，您將需要重新選擇它（例如，通過b.parent() ）。