如何使用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 );