Using jQuery's wrap() with Variables

Written on July 18, 2012 Updated on November 1, 2014: Provided a simpler solution

Since beginning my work at Pixel Union, I’ve become a bit of a jQuery freak. Well, that sounds like a bad thing but it’s really not. I went into the new job (that isn’t so ‘new’ anymore) with a pretty low level of jQuery knowledge. I could fiddle around with plugin options but that was it. Since then I’ve developed my own plugin (Extended Tumblr Photoset) and am using jQuery on every project.

I was having trouble in a recent project using the wrap() function and I couldn’t figure it out. I was trying to using it (actually, I was using wrapInner) on a variable from an ajax call and it just wouldn’t accept it. I was getting the following error:

Uncaught TypeError: Object 1 like has no method 'wrapInner'

What I was trying to do was simple enough, I just wanted to wrap some text in a link created from another variable:

someText.wrapInner(someLink);

It took a bit of searching on Stack Overflow to find my answer:

Second: if img hasn’t been appended to the document yet, then you can’t modify it in-place with wrap().

Bingo! I hadn’t appended someText to the document yet! Instead of wrapping and then appending, I just switched it up to appending then wrapping! After I append the text to the document, I just use this simple line to wrap it:

$('.'+uniqueIdentifier).find('.my-appended-div').wrapInner(photoLink);

Just like that, everything is working as it should.

Update

It’s been more than two years since I posted the above and I sure have come a long way in my JS knowledge. Still sticking with jQuery, here’s a much simpler way of doing this:

var div = $(someText).appendTo(document.body).wrapInner(someLink);

This way I don’t need to append someText and then traverse the DOM again looking for it. Hurray for simple solutions.