Can't focus an Input created with JS

Question

I start saying that I'm a newbie ,my problem is that I can't focus the input field that i created in pure Js, I can focus it only right-clicking or using Tab.
Could anyone explain me where is the problem here and how could i fix it using simply pure JS?
As you can see i've simply added some elements in my DOM.

HTML:

 <script src="nuovaVoce.js"></script> <div id="cla" onclick="nuovavoce()">+ nuova voce</div> 

JAVASCRIPT:

 function nuovavoce() { var div = document.createElement('div'); var caselle = document.createElement("form"); var input1 = document.createElement("input"); var input2 = document.createElement("input"); document.getElementById("cla").appendChild(div); div.style.backgroundColor = "black"; div.style.position = "absolute"; div.style.left = "0px"; div.style.width = "100%"; div.style.height = "100%"; div.style.top = "0px"; div.appendChild(caselle); caselle.setAttribute("method", "post"); caselle.setAttribute("enctype", "multipart/form-data"); caselle.setAttribute("onsubmit", ""); caselle.appendChild(input1); input1.style.position = "static"; input1.style.width = "80%"; input1.style.height = ""; input1.style.marginLeft = ""; input1.style.marginTop = ""; input1.setAttribute("name", "titolo"); input1.setAttribute("type", "text"); caselle.appendChild(input2); input2.style.position = "static"; input2.style.width = "80%"; input2.style.height = ""; input2.style.marginLeft = ""; input2.style.marginTop = ""; input2.setAttribute("type", "submit"); input2.setAttribute("name", "submit_categoria"); } 

Answer 1

I would suggest to use .focus() method. At the end of your function you need to add:

add input1.focus(); 

 function nuovavoce() { var div = document.createElement('div'); var caselle = document.createElement("form"); var input1 = document.createElement("input"); var input2 = document.createElement("input"); document.getElementById("cla").appendChild(div); div.style.backgroundColor = "black"; div.style.position = "absolute"; div.style.left = "0px"; div.style.width = "100%"; div.style.height = "100%"; div.style.top = "0px"; div.appendChild(caselle); caselle.setAttribute("method", "post"); caselle.setAttribute("enctype", "multipart/form-data"); caselle.setAttribute("onsubmit", ""); caselle.appendChild(input1); input1.style.position = "static"; input1.style.width = "80%"; input1.style.height = ""; input1.style.marginLeft = ""; input1.style.marginTop = ""; input1.setAttribute("name", "titolo"); input1.setAttribute("type", "text"); caselle.appendChild(input2); input2.style.position = "static"; input2.style.width = "80%"; input2.style.height = ""; input2.style.marginLeft = ""; input2.style.marginTop = ""; input2.setAttribute("type", "submit"); input2.setAttribute("name", "submit_categoria"); input1.focus(); } 

 <div id="cla" onclick="nuovavoce()">+ nuova voce</div>