Question

我正在尝试复制DIV的内容并在副本之前插入标题。但是，标题会插入错误的位置。

var reference = $('#reference').clone().contents();
reference.prepend('<h1>Heading</h1>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="reference">
  <ul>
    <li></li>
  </ul>
</div>

我希望标题在<ul>之前，但它会在第一个li之前插入。

所以它看起来像这样：

<div id="copy">
  <ul>
    <h1>Heading</h1>
    <li></li>
  </ul>
</div>

而不是这个（我想要的）：

<div id="copy">
  <h1>Heading</h1>
  <ul>
    <li></li>
  </ul>
</div>

这可能是一个非常基本的问题，但是几个小时的尝试prependTo()，before()，insertBefore()并在线搜索并没有让我更接近。谢谢:)）

Answer 1

首先删除contents()，因为您要克隆整个元素，而不是其子元素。其次，创建h1标记，然后使用prependTo()将其放置在克隆元素中的所需位置。

另请注意，您当前的代码会导致DOM中出现重复的id属性，这些属性无效。我建议改为将#reference id设置为一个类。试试这个：

＆＃13;

var reference = $('.reference:first').clone();
$('<h1>Heading</h1>').prependTo(reference);

$('body').append(reference);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="reference">
  <ul>
    <li>Foo</li>
  </ul>
</div>

＆＃13;

Answer 2

像我一样尝试使用它并且工作正常。

$('#reference').clone().contents().parent().prepend('<h1>Hea‌ding</h1>')

jQuery在意外位置预先插入克隆

2 个答案: