Add inputs to form using JS


It's possible to add inputs that are created dynamically by the user to a form?

Let's say I have this when the page loads:

<form id="my-form" xl-form>
... // some inputs

And after that, I create an input (after the page loads)
<input type="input" class="integr_elements" placeholder="name" id="name">

How can I add it inside the form that has "my-form" as id?
I need to add it inside because I'm using a GitHub plugin that will affect only the inputs that are inside the

Is this possible?



Solved with this:

  var myinput = document.getElementById("#name"); 



When you append, what happens to the original element with the id "name"? Are there now 2 elements having the same id value?

If so, I am interested in how you ensured expected behavior since AFAIK, there are no specifications on how any given script / layout engine must deal with that.


What you are doing is identifying an existing element, then appending it to a form in which it already exists.

If you insist on using jQuery, then you should .clone() an element, or create one from scratch, give it a different id and name, THEN append it to the form.


^ _ ^



You can also select an element on the page and insert it into another [...] If an element selected this way is inserted into a single location elsewhere in the DOM, it will be moved into the target (not cloned)

Important: If there is more than one target element, however, cloned copies of the inserted element will be created for each target except for the last one.