insertAfter,然后删除前一个元素

时间:2014-02-08 19:27:29

标签: javascript jquery dom

使用一段应该执行简单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()代替,反转参数,但获得相同的结果。

3 个答案:

答案 0 :(得分:1)

删除b.detach() b.insertAfter(一);会移动它

答案 1 :(得分: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());
    });
});

<强>更新

这是如何在这个小提琴中描述的场景中完成的:http://jsfiddle.net/8wy7v/1/

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

答案 2 :(得分:1)

原因是wrap确实克隆了元素 - 因此a引用的内容实际上并不包含b。顺便说一句,detach是多余的,因为当插入DOM中的其他位置时,元素将被自动删除。

为了获得要插入的a,您需要重新选择它(例如b.parent())。