jQuery prepend on clone inserting at unexpected location

Question

I'm trying to copy the contents of a DIV and insert a heading before the copy. However, the heading gets inserted at the wrong point.

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>

I want the heading to go before the <ul> but instead it gets inserted after before the first li.

So it looks like this:

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

Instead of this (what I want):

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

This is probably a really basic question but a few hours of trying prependTo(), before(), insertBefore() and searching online have not gotten me any closer. Thanks :)

maybe something like this? var reference = $('#reference > ul').clone().contents(); — Nomistake
– Nomistake, Commented Feb 23, 2017 at 8:02
try using- $('#reference').clone().contents().parent().prepend('<h1>Heading</h1>') — John Ambrose
– John Ambrose, Commented Feb 23, 2017 at 8:31

Rory McCrossan · Accepted Answer · 2017-02-23 07:52:54Z

2

Firstly remove contents() as you want to clone the whole element, not its children. Secondly, create the h1 tag, then use prependTo() to place it at the desired location in the cloned element.

Also note that your current code results in duplicate id attributes in the DOM, which is invalid. I'd suggest making the #reference id in to a class instead. Try this:

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

$('body').append(reference);

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

answered Feb 23, 2017 at 7:52

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

2x3x10 Over a year ago

Thanks for your speedy response! I made a few mistakes in my original question - I did actually only want the contents of #reference and using prependTo() still results in the heading being inserted after the <ul>. I've edited and corrected my original question

Rory McCrossan Over a year ago

I'm still not clear on exactly what you want. Can you edit the question to show the HTML you expect to have after the jQuery has run including the cloned content

John Ambrose · Accepted Answer · 2017-02-23 08:32:27Z

0

Use it like this I have tried and It is working fine.

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

answered Feb 23, 2017 at 8:32

John Ambrose

1871 gold badge1 silver badge11 bronze badges

1 Comment

2x3x10 Over a year ago

This actually does exactly what I needed to do. Thanks! :o)

Collectives™ on Stack Overflow

jQuery prepend on clone inserting at unexpected location

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related