how to append a variable to an HTML element stored as string using Jquery?

Question

I have an empty controlgroup, which I want to populate with buttons. Can't get it to work.

This is the controlgroup:

var $wrap = '<div class="wrap"><div data-role="controlgroup"></div></div>';

This is the button:

var $btn = '<a href="#some" data-role="button">Click</a>'

I want to do something like this:

$wrap.append( $btn );

But it's not working.

Can someone tell me what I'm doing wrong? I think $wrap is just a string, so I cannot call append on it. If so, how do I do it correctly?

Thanks for help!

adeneo · Accepted Answer · 2012-04-13 17:18:23Z

2

var $wrap = $('<div class="wrap"><div data-role="controlgroup"></div></div>');
var $btn = $('<a href="#some" data-role="button">Click</a>');
$wrap.append( $btn );

There's probably fifty ways to this, like:

var $wrap = $('<div class="wrap"><div data-role="controlgroup"></div></div>'),
    $btn = '<a href="#some" data-role="button">Click</a>';

$wrap.children().append( $btn );

or:

var $wrap = $('<div class="wrap"><div data-role="controlgroup"></div></div>'),
    $btn = '<a href="#some" data-role="button">Click</a>';

$('[data-role="controlgroup"]', $wrap).append( $btn );

edited Apr 13, 2012 at 17:18

answered Apr 13, 2012 at 17:08

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

James Montagne Over a year ago

btn can actually just be text.

adeneo Over a year ago

@JamesMontagne - Sure it can, added a few more ways to do this, and I can think of quite a few more using filters and different selectors?

James Montagne · Accepted Answer · 2012-04-13 17:08:45Z

1

You simply have strings, you need a jquery object to call append:

var $wrap = $('<div class="wrap"><div data-role="controlgroup"></div></div>');

answered Apr 13, 2012 at 17:08

James Montagne

78.9k14 gold badges115 silver badges132 bronze badges

Comments

Alex Turpin · Accepted Answer · 2012-04-13 17:09:59Z

1

Well, first off, those are strings. You'll want to turn them into jQuery objects using $.

var $wrap = $('<div class="wrap"><div data-role="controlgroup"></div></div>');
var $btn = $('<a href="#some" data-role="button">Click</a>');

Now to append $btn into $wrap, you can go find the inner div (which is where you want to append the element) and use .append:

$wrap.find("div").append($btn);

Live example

answered Apr 13, 2012 at 17:09

Alex Turpin

47.9k23 gold badges118 silver badges146 bronze badges

Comments

wong2 · Accepted Answer · 2012-04-13 17:11:00Z

0

I think $wrap is just a string, so I cannot call append on it.

Yes.

You could try:

var $wrap = $('<div class="wrap"><div data-role="controlgroup"></div></div>');
var $btn = '<a href="#some" data-role="button">Click</a>';
$wrap.append( $btn );

answered Apr 13, 2012 at 17:11

wong2

36.1k51 gold badges138 silver badges182 bronze badges

Collectives™ on Stack Overflow

how to append a variable to an HTML element stored as string using Jquery?

4 Answers 4

2 Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Related