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

テキストを追加してから要素を追加する必要があります。テキストにオブジェクトを追加していたので、[オブジェクトオブジェクト]が表示されていました。

$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コンテンツを取得します。