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.


This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.