How to add a HTML button in JavaScript code?

How do I add a button that only shows up in HTML when a function is called in JavaScript? I have a function where when you write some text in a text-box and click on a button - that said text was written on the HTML, but I want to add a button next to the text that pops up. How do I write that in the JavaScript code?

Do you mean something like this?

<script>
  var btn = document.createElement("BUTTON");
  btn.innerHTML = "New Button";

  function appendButton(){
    document.getElementById("container").appendChild(btn);
  }
</script>
<div id='container'>
  <button id='button1' onclick="appendButton()">Click Me</button>
</div>

It is kind of useless to add a HTML button in Javascript when you can just write it in HTML.

You can use the .append() Javascript function with Jquery:

$(function(){
    $('button').on('click',function(){
        var r= $('<input type="button" value="new button"/>');
        $("body").append(r);
    });
});

How to fish: use a function over and over again so you don't have to keep figuring this out. I keep a large set of highly reusable functions for my web platform.

There is one caveat: I code strict so if it's a single element just add the xmlns="http://www.w3.org/1999/xhtml" attribute/value any where. If you need multiple elements you'll need a single containing parent that contains all the child elements that has the xmlns="http://www.w3.org/1999/xhtml" XML namespace. I run circles in efficiency with this stuff because it's strict code.

There are two prerequisite functions needed at the bottom of this post.

xml_add('before', id_('element_after'), '<input type="button" xmlns="http://www.w3.org/1999/xhtml" />');

xml_add('after', id_('element_before'), '<input type="text" xmlns="http://www.w3.org/1999/xhtml" />');

xml_add('inside', id_('element_parent'), '<input type="text" xmlns="http://www.w3.org/1999/xhtml" />');

Add multiple elements (namespace only needs to be on the parent element):

xml_add('inside', id_('element_parent'), '<div xmlns="http://www.w3.org/1999/xhtml"><input type="text" /><input type="button" /></div>');

Dynamic reusable code:

function id_(id) {return (document.getElementById(id)) ? document.getElementById(id) : false;}

function xml_add(pos, e, xml)
{
 e = (typeof e == 'string' && id_(e)) ? id_(e) : e;

 if (e.nodeName)
 {
  if (pos=='after') {e.parentNode.insertBefore(document.importNode(new DOMParser().parseFromString(xml,'application/xml').childNodes[0],true),e.nextSibling);}
  else if (pos=='before') {e.parentNode.insertBefore(document.importNode(new DOMParser().parseFromString(xml,'application/xml').childNodes[0],true),e);}
  else if (pos=='inside') {e.appendChild(document.importNode(new DOMParser().parseFromString(xml,'application/xml').childNodes[0],true));}
  else if (pos=='replace') {e.parentNode.replaceChild(document.importNode(new DOMParser().parseFromString(xml,'application/xml').childNodes[0],true),e);}
  //Add fragment and have it returned.
 }
}