How to add a HTML button in JavaScript code?

Question

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?

I'm sorry I can't, but do you know a way to write HTML in JavaScript code? — Karla Jensen, Jan 03 '20 at 13:32
but it's basically this function discussed in this forum: https://stackoverflow.com/questions/22402777/html-javascript-button-click-counter?fbclid=IwAR339XbRSZyPSmuOpieiMhrTpIRcVE3SK8Z-zPOBEMg7OKbElWVG39BzuMM — Karla Jensen, Jan 03 '20 at 13:33

score 2 · Answer 1 · answered Jan 03 '20 at 13:33

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>

score -1 · Answer 2 · answered Jan 03 '20 at 13:38

-1

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);
    });
});

answered Jan 03 '20 at 13:38

Hugo Sohm

2,872
4
23
40

1. My code does NOT require dumping five copies of a library to work or come with any other prerequisites. 2. Your code is *not* short, it's a one-off where as mine is reusable. 3. There is a ton of documentation where jQuery breaks it's own code across versions! Mine will not break because there are no third parties involved. Just because you are familiar with something does not imply that it is better. – John Jan 03 '20 at 14:58
Commenting other answers to say that I it a bad way imply that yours is better. – Hugo Sohm Jan 03 '20 at 16:33
It's not that I have a better answer, it's that yours leads someone learning down a path of convenience and apathy. – John Jan 03 '20 at 17:59
I just wrote a fast and used solution. The person who asked the question will take what suits him best, not you. – Hugo Sohm Jan 05 '20 at 14:15

score -1 · Answer 3 · answered Jan 03 '20 at 14:00

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.
 }
}

It's a really really really OLD method to push code into html, and the `jQuery` method ( answered by @hugo-s ) is more simple... — MrLizzard, Jan 14 '20 at 18:13

How to add a HTML button in JavaScript code?

3 Answers3