Add input to form using JS

Question

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>
... // here the inputs
</form>

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 want to use a GitHub plugin that will affect only the inputs that are inside the form.

Is this possible?

Thanks!

PS: Before posting this, searched on the forum but found 2013 post and seems there are some deprecated ways.

Answer 1

You can use Node.appendChild() for a pure javascript solution (no jQuery).

const el = document.createElement("input");
el.className = "integr_elements";
el.placeholder = "name";
el.id = "name";

const form = document.getElementById("my-form");
form.appendChild(el);

<form id="my-form" xl-form></form>