使用一段应该执行简单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()
代替,反转参数,但获得相同的结果。
答案 0 :(得分:1)
删除b.detach() b.insertAfter(一);会移动它
答案 1 :(得分:1)
我不确定你的意思,如果我尝试它,它会以你想要的方式工作:
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()
)。