javascript - 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

我不确定你的意思，如果我尝试一下，它会按照你想要的方式工作:

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());
    });
});

更新:

这就是在此 fiddle 中描述的场景中可以完成的方法:http://jsfiddle.net/8wy7v/1/

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