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!

Answer 1

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 );

Answer 2

您仅具有字符串，就需要一个jquery对象来调用append：

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

Answer 3

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

Answer 4

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 );