jQuery .Wrap Function Help... wrapping div with another div

var el = widget; // Ordered HTML Lists
var h开发者_开发问答elper = $('<div class="positionHelper"></div>');
var wrapper = $('<div class="slide-out-div"></div>');

helper.css({ position: 'absolute', width: dims.refW, height: dims.refH });
el.wrap(helper);
helper.wrap(wrapper);
wrapper.append('<div id="handle">');

For some reason, the output for this is without the "slide-out-div" DIV or the "handle" DIV. It simply appends the "helper" DIV to the page, but without having the other two divs in there. Any clue why that is?

Trying to achieve:

<div class="slide-out-div">
  <div class="handle"></div>
  <div class="positionHelper">Bunch of Content</div>
</div>

positionHelper will have some CSS variables as you can see, but this is generally what I want to have the output come out as. The problem is that I can't seem to wrap positionHelper with the slide-out-div at all.

UPDATE:

Actually, this works, but seems a bit lengthy for what I'm trying to do.

var h = $(".positionHelper")
h.wrap(wrapper);
var f = $(".positionHelper")
f.before('<div id="handle">');

var helper = $('<div class="positionHelper"></div>');
var wrapper = $('<div class="slide-out-div"></div>');

$('body').append(wrapper);
wrapper.append('<div id="handle"></div>').append(helper);

Problem is here, try something like this:

el.wrap(helper.html());
helper.wrap(wrapper.html());