insertAfter（）之后的jQuery insertBefore（）

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引用了同一个对象，所以遵循以下顺序

• 首先添加 - ＆gt; HI1
• 在第二个之后添加了克隆的副本 - ＆gt; HI2
• 先删除后再添加。 - ＆GT; HI2
• 在第二个之前添加了克隆副本 - ＆gt; HI3

使用此代替

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

Answer 2

这不是jQuery的错误。这是因为在执行'<h1>Hi</h1>'语句后，对insertAfter()的第一次引用现在位于DOM中。所以你可以改变它：

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 3

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

Answer 4

<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/