jquery：在[object Object]中追加文本和对象结果

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 object]的原因。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

基本上这是在创造一个克隆＆＃34;的元素，然后将克隆包装在div中，切换到div（父）然后抓取该父div的html内容。