Question

HTML：

<div class="here">This is here</div>

<div class="insert">This is to be inserted</div>

jQuery：

$(document).ready(function(){

 var $m = $(".insert");
 $(".here").before($m);


});

它产生预期的结果 - 切割insert div并将其粘贴到here div之前。但如果代码如下，

$(".here").before($m, $m);

然后insert在here div之前没有出现两次。但是，如果我使用div作为第二个参数而不是第一个参数，则按以下方式：

$(".here").before($m, $('<div class="insert2">This is insert 2</div>'));

然后insert和insert2 divs出现在here div之前。

如果两个参数相同，为什么divs here之前不会出现两个div？

Answer 1

您正在做的是将现有元素从一个地方移动到另一个地方;你没有创建它的额外副本。使用.clone()方法创建副本并插入所需位置：

$(".here").before(
    $m         /*.attr("title", "original")*/,
    $m.clone() /*.attr("title", "copy # 1")*/,
    $m.clone() /*.attr("title", "copy # 2")*/
);

您的另一个示例创建了一个新元素，这就是它按预期工作的原因。

Answer 2

当您将现有DOM元素作为DOM插入方法的参数时，它不会复制该元素，而只是将该元素移动到您指定的位置。单个DOM元素一次只能在一个位置，因此如果指定两次相同的元素，则会将其移动两次。如果您需要元素的副本，则必须明确指出：

$(".here").before($m, $m.clone());

Answer 3

这是因为元素只能存在一次。使用$(".here").before($m, $m);你说在'.here'之前插入element_x而不是在'.here'之前插入element_x。所以它被移动，而不是再次移动到同一个地方。

使用$(".here").before($m, $('<div class="insert2">This is insert 2</div>'));，您将在第二个参数中创建一个新元素，以便正常工作。

要复制元素以将其插入两次，您可以克隆元素并插入两者：

var $m2 = $m.clone();
$(".here").before($m, $m2);

在.before（）中多次使用相同的参数不能像我预期的那样工作

3 个答案: