I'm trying to dynamically place a button element next to some text but I'm getting the following in the 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/
What am I doing wrong here and how can I fix this?
You have to append the text and then the element. You were appending an object to text, which is why you were getting the [Object 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>Use this code
$btn = $('<button>').text('Button');
$('<div>').html('Text next to button ' + $btn[0].outerHTML).appendTo($('#test'))
$btn = $('<button>').text('Button');
$('<div>').html('Text next to button ' + $btn.clone().wrap('<div>').parent().html()).appendTo($('#test'))
Basically what this is doing is creating a "clone" of the element, then wrapping the clone in a div, switching to the div (parent) then grabbing the html contents of that parent div.
