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?

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. Это связано с тем, что первая ссылка на '<h1>Hi</h1>' теперь находится в DOM после выполнения: insertAfter(). Таким образом, вы можете изменить его следующим образом:

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>