Question

我正在尝试克隆一个简单的div并将其插入其后：

＆＃13;

$(document).ready(function() {

  // clone and append
  $("div").clone().appendTo("div");

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="height: 10px; background-color: blue; width: 600px; margin-bottom:1px"></div>

＆＃13;

为什么这不符合预期？

Answer 1

替代

附加到父容器

$(document).ready(function() {

  // clone and append
  $("div").clone().text('cloned div').appendTo("body");

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div style="background-color: blue; width: 600px; margin: bottom:1px">original div</div>

appendTo('div')无法正常工作，因为它在最后插入了克隆的div，但在现有的div中。

Answer 2

如果你想在现有元素之后插入元素，那么你应该使用.inserftAfter()

$(function() {
  $('div').clone().insertAfter('div');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="height: 25px; background-color: blue; width: 25px; margin-bottom:1px"></div>

jQuery clone元素和insertAfter

2 个答案: