jQuery insertBefore（）insertAfter（）之后

Question

正如你在这个https://jsfiddle.net/yxvwfh6x/中看到的，我试图在div之后添加一个元素。

var hi = $('<h1>Hi</h1>'); 
var div = $('div'); 
hi.insertAfter(div); 
hi.insertBefore(div); 

在结果insertBefore删除最后Hi。请尝试使用此代码来了解正在发生的事情。

var hi = $('<h1>Hi</h1>'); 
var div = $('div'); 
hi.insertAfter(div); 
setTimeout(function(){ 
    hi.insertBefore(div); 
},1000); 

这是jQuery的bug吗？

Answer 1

因为hi是指同一个对象，所以下面的序列之后是

• 第一后加入 - > HI1
• 后第二相加克隆副本 - > HI2
• 第一和前添加后移除第一。 - > HI2
• 增加了一个克隆副本前第二 - > HI3

用这个代替

var div = $('div'); 
$('<h1>Hi</h1>').insertAfter(div); 
$('<h1>Hi</h1>').insertBefore(div); 

Answer 2

<div class="inner">1</div> 
<div class="inner">2</div> 


$("<h1>Hi</h1>").insertBefore(".inner"); 
$("<h1>Hi</h1>").insertAfter(".inner"); 

试试这个希望它有助于 的jsfiddle：https://jsfiddle.net/ssuryar/336z5pnt/2/

Answer 3

不，这是而不是jQuery的bug。这是因为在执行语句后，现在在DOM中第一次引用'<h1>Hi</h1>'。所以，你可以这样改：

var h1Text = '<h1>Hi</h1>'; 
var div = $('div'); 
$(h1Text).insertAfter(div); 
$(h1Text).insertBefore(div); 

或者你也可以与您现有的代码中使用clone()：

var hi = $('<h1>Hi</h1>'); 
var div = $('div'); 
hi.insertAfter(div); 
hi.clone().insertBefore(div); 

Answer 4

<script> 
var div = $('div'); 
div.insertAfter(div); 
div.insertBefore(div); 
</script>