I wish to dynamically add a button on a html form so that a user can upload multiple files when filling-in the form. The css design is both elastic and fluid and the intention is that whenever a user clicks on the "add file" link, a new button is added to allow the user to browse for the file, add it and finally upload it. The buttons should appear on the main content area of the page and should not overflow outside the footer area and should be rendered vertically with each button appearing on a newline. The code below does exactly that. This question is very much related to this question but with a twist of the css (design) requirements.
function myFunction() {
var btn = document.createElement("BUTTON");
var text = document.createTextNode("Browse..");
btn.appendChild(text);
var newbutton = document.getElementById("button"); //new div button element introduced on html.
document.body.insertBefore(btn,newbutton);//insert before method
}
/*Mailu*/
div {
padding: 1px 0;
}
#header {
background: #DDDDDD;
}
#footer {
clear: both;
background: #DDDDDD;
}
/*add css as suggested here https://stackoverflow.com/a/2038374/2941758*/
button{display:block;}
<!DOCTYPE html>
<html>
<body>
<link href="button.css" rel="stylesheet" type="text/css"/>
<div id = "header">
<p>Home</p>
</div>
<p>Upload file.</p>
First name: <input type = "text" name = "Firstname"><p>
<div id = "button"> <!--added div button on html-->
<a href="javascript:void(0)" onclick= "myFunction()" > Add file</a>
</div>
<div id="footer"><p>footer</p>
</div>
</body>
</html>
[1]: https://stackoverflow.com/questions/29943352/dynamically-create-element-but-use-a-href-instead-of-a-button-onclick
