Sometimes, we want to create a form dynamically via JavaScript.
In this article, we’ll look at how to create a form dynamically via JavaScript.
How to create a form dynamically via JavaScript?
To create a form dynamically via JavaScript, we use the createElement method.
For instance, we write
const f = document.createElement("form");
f.setAttribute("method", "post");
f.setAttribute("action", "submit.php");
const i = document.createElement("input");
i.setAttribute("type", "text");
i.setAttribute("name", "username");
const s = document.createElement("input");
s.setAttribute("type", "submit");
s.setAttribute("value", "Submit");
f.appendChild(i);
f.appendChild(s);
document.body.appendChild(f);
to call createElement with 'form' to create a form element.
Then we set its attributes by calling setAttribute with the attribute name and value.
Next, we call createElement with 'input' to create input elements.
Then we call f.appendChild to append the inputs to the form as its children.
Finally, we call document.body.appendChild with f to append the form as the body’s last child.
Conclusion
To create a form dynamically via JavaScript, we use the createElement method.
