如何使用jQuery将变量附加到作为字符串存储的HTML元素？

Question

我有一个空的对照组，我想用按钮填充它。 无法正常工作。

这是对照组：

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

这是按钮：

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

我想做这样的事情：

$wrap.append( $btn );

但这不起作用。

有人可以告诉我我在做什么错吗？ 我认为$ wrap只是一个字符串，因此无法在其上调用append 。 如果是这样，我该如何正确执行？

感谢帮助！

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

可能有五十种方法，例如：

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

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

要么：

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

好吧，首先，这些是字符串。 您将需要使用$将它们转换为jQuery对象。

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

现在将$btn附加到$wrap ，您可以找到内部div（要在其中附加元素）并使用.append ：

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

现场例子

Answer 4

我认为$ wrap只是一个字符串，因此无法在其上调用append。

是。

您可以尝试：

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