jQuery: Prevent wrap() from creating a copy of the wrapping element

Asked Apr 12 '16 at 08:17

Active Apr 12 '16 at 08:33

Viewed 66 times

In jQuery's docs for wrap() is the following:

A copy of this structure will be wrapped around each of the elements in the set of matched elements.

This means that when I save the element that I want to wrap around another element into a variable, after wrapping, the variable doesn't point to the wrapping element anymore. So e.g. adding another CSS class to it after wrapping doesn't happen to the wrapping element (which is a copy) but only to the original one.

In contrast to this, append() doesn't copy the element.

$(document).ready ->
  $appendEl = $("<span href='#'>appended</span>")
  $('#append').append($appendEl) # Append
  $appendEl.addClass 'new-class' # Works

  $wrapEl = $("<span href='#'>wrapped</span>")
  $('#wrap').wrap($wrapEl) # Wrapp
  $wrapEl.addClass 'new-class' # Doesn't work

I have created a CodePen to demonstrate this: http://codepen.io/jmuheim/pen/QNQZKw

So why does wrap() copy the element, and how can I make the code above work for wrap()?

And why does jQuery copy the element when doing wrap()? Doesn't this make much overhead and "pollute" things?

edited Apr 12 '16 at 08:33

asked Apr 12 '16 at 08:17

Joshua Muheim

12,617
9
76
152

`wrapEl = $('#wrap').wrap($wrapEl).parent()` – Arun P Johny Apr 12 '16 at 08:19
`wrap()` returns element itself. You could just inverse your logic using `$wrapEl.appendTo('#wrap')` – A. Wolff Apr 12 '16 at 08:20
1

Wouldn't `append` be the more appropriate method for what you're trying to do? – T.J. Crowder Apr 12 '16 at 08:20
@A.Wolff: Thank you, this works better. – Joshua Muheim Apr 12 '16 at 08:32
@T.J.Crowder: This is only a demo, it doesn't have to make sense. – Joshua Muheim Apr 12 '16 at 08:33

jQuery: Prevent wrap() from creating a copy of the wrapping element

0 Answers0