jQuery: How to create element then wrap this around another existing element?

Question

So I know how to use .wrap, .wrapInner and .wrapAll but I am wondering how to use the quick creation syntax introduced in jQuery 1.4 and the wrap function together.

Basically I want to be able to use

var targetUl = $(this), // would be populated by script
    maxWidth = 1400;    // would be populated by script

$('<div />', {
    'id':'wrap',
    'css': {
        'width': maxWidth,
        'overflow':'hidden'
    }
}).wrapAround(targetUl);

Kinda like the .appendTo method works but for wrapping stuff…

Can this be done?

Thanks.

score 7 · Accepted Answer · answered Nov 16 '10 at 03:28

7

targetUl.wrap(
    $('<div />', {
        'id':'wrap',
        'css': {
            'width': maxWidth,
            'overflow':'hidden'
        }
    })
);

answered Nov 16 '10 at 03:28

AndreKR

32,613
18
106
168

nice, didn't realize I could simply drop that 'creator syntax' into the `.wrap` function. – Jannis Nov 16 '10 at 05:00
Since wrap *clones* the element, this will unnecessarily create two elements: http://jsfiddle.net/qBkA5/ – Joseph Silber Oct 31 '13 at 20:11

score 1 · Answer 2 · answered Nov 16 '10 at 03:27

1

jQuery .wrap() is what you're looking for. It provides this functionality in a neater way

answered Nov 16 '10 at 03:27

Dave L

966
4
11

jQuery: How to create element then wrap this around another existing element?

2 Answers2

Linked