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>