jquery:在 [object Object] 中附加文本和对象结果

Question

我正在尝试动态地将按钮元素放置在某些文本旁边，但我在 DOM 中收到以下内容:按钮 [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>