jquery：追加文本和對象結果在[對象對象]

Question

我想動態地放置一些文本旁邊的按鈕元素，但我在DOM中獲得以下內容：Text next to button [object Object]。

$btn = $('<button>').text('Button'); 
 
$('<div>').html('Text next to button ' + $btn).appendTo($('#test'))

<script src="https://code.jquery.com/jquery-3.2.1.js"></script> 
 
<div id="test"></div>

的jsfiddle：https://jsfiddle.net/p43rft4q/1/

什麼我錯在這裏做什麼，我怎麼能解決這個問題？

Answer 1

您必須追加文本，然後添加元素。您正在將一個對象附加到文本中，這就是您獲取[Object對象]的原因。

$btn = $('<button>').text('Button'); 
 
$('<div>').append('Text next to button ').append($btn).appendTo($('#test'))

<script src="https://code.jquery.com/jquery-3.2.1.js"></script> 
 
<div id="test"></div>

Answer 2

使用此代碼

$btn = $('<button>').text('Button'); 
$('<div>').html('Text next to button ' + $btn[0].outerHTML).appendTo($('#test')) 

Answer 3

$btn = $('<button>').text('Button'); 
$('<div>').html('Text next to button ' + $btn.clone().wrap('<div>').parent().html()).appendTo($('#test')) 

基本上這是什麼做的是創造一個元素的 「克隆」，然後包裹克隆在一個div，開關到div（父），然後抓取父div的html內容。