How can I convert object HTMLButtonElement to html button?

Question

Hi I get object HTMLButtonElement due to var btn = document.createElement('button'); this is normal behaviour but how can I get normal button as an graphic instead of object? i.e <button type="button">

like a converting object into a string but in this case object to what?

Solution

In the dom, Button is stored as instances of HTMLButtonElement object, that is why when you try to convert it to string(calling toString()) you are getting [object HTMLButtonElement].

Since you want to add the button to the view(dom tree), you can just append the button instance to the tree using appendChild() like

var btn = document.createElement('button');
btn.innerText = 'this button';
document.getElementById('container').appendChild(btn);
document.getElementById('markup').innerText = btn.outerHTML;

<div id="container"></div>
<pre id="markup"></pre>

Comments

[Alexander O'Mara]

What's wrong with the object? Do you need to convert it to HTML or something? Usually you can just use the object though.

[Ram]

That's a DOM representation of an object. You should really read about how DOM works as it seems you have no idea what you are doing.

[Arun P Johny]

just like jsfiddle.net/arunpjohny/xq1n18sy/1