jQuery: wrap newly created html

Question

I create HTML snippet on-the-fly:

$('<span/>').addClass(spanClass)

Is there a jQuery way to wrap this code into <div>?

Semantically I want to do:

$('<span/>').addClass(spanClass).wrap($('<div/>').addClass(divClass))

that does not work. So I just want following jQuery-idiomatic version:

function wrap(what, with) { return $(with).append(what); }

score 11 · Accepted Answer · answered Jan 12 '11 at 16:57

11

Keep in mind that your jQuery object is still referencing the new <span>, so if you're trying to insert it with a chained method, the <div> won't be inserted.

To overcome this, you'd need to traverse up to the new parent <div> first.

    // Traverse up to the new parent in order to append the <div> and <span>
$('<span/>').addClass(spanClass).wrap($('<div/>').addClass(divClass))
            .parent().appendTo('body');

You could also write it like this:

$('<span/>').addClass(spanClass).wrap('<div/>')
            .parent().addClass(divClass).appendTo('body');

answered Jan 12 '11 at 16:57

user113716

318,772
63
451
440

first, it does not work, `wrap()` wraps nodes in DOM, $('') is not in DOM until I put it there. Second, if I'd use function I presented I would do `$('body').append(wrap(...))` – THX-1138 Jan 12 '11 at 17:08
@user93422: First, yes it does work. [Here's an example.](http://jsfiddle.net/2Wnpc/) Second you'll get the same result using that method of `$('body').append(` *if* you don't bother to traverse up to the new `
`.
– user113716 Jan 12 '11 at 17:12
[...here's an example](http://jsfiddle.net/2Wnpc/2/) using `$('body').append(...` without traversing. And [here's an example](http://jsfiddle.net/2Wnpc/3/) that works because it *does* traverse up to the new parent `
`.
– user113716 Jan 12 '11 at 17:16
@user93422: To be clear, when you do `$('')` you *are* creating a DOM element. When you wrap it with `$('
')`, you now have a hierarchy of elements *that can be traversed* even though they're not yet inserted into the `document`. – user113716 Jan 12 '11 at 17:24
2

aha, `.wrap()` returns the *wrapped* object indeed. my bad, it does work. – THX-1138 Jan 12 '11 at 17:38

Tomalak · Answer 2 · 2011-01-12T17:58:12.643

4

$('<div/>', {'class': divClass}).append($('<span/>', {'class': spanClass}));

edited Jan 12 '11 at 17:58

answered Jan 12 '11 at 16:58

Tomalak

332,285
67
532
628

1

+1 for the use of the "props" object, but you should put `class` in quotes, or call it `className` to avoid reserved word issues. – user113716 Jan 12 '11 at 17:04
how is it different from `function wrap(what, with) { return $(with).append(what); }`? – THX-1138 Jan 12 '11 at 17:09
@user: Well, in that it does not use a separate function. Being *"jQuery idomatic"* also means to not break the function chaining that makes jQuery so convenient. Whether you call `foo.wrap(bar)` or `bar.append(foo)` is less important IMHO – Tomalak Jan 12 '11 at 18:28

score 1 · Answer 3 · answered Jan 12 '11 at 16:57

1

Why not:

$('<div/>').addClass(divClass).append($('<span/>').addClass(spanClass));

IE create your div first?

answered Jan 12 '11 at 16:57

Jason Benson

3,371
1
19
21

1

because I suspect there got to be a built-in in jQuery way to accomplish this. – THX-1138 Jan 12 '11 at 17:10

score 0 · Answer 4 · answered Jan 12 '11 at 16:57

0

Try this:

$('<span/>').addClass(spanClass).wrap($('<div/>').addClass(divClass).html());

or

$('<div/>').addClass(divClass).append($('<span/>').addClass(spanClass));

answered Jan 12 '11 at 16:57

Chandu

81,493
19
133
134

jQuery: wrap newly created html

4 Answers4