javascript - Browser does not set focus on generated input -

I try to create an editable table for some reason I could not focus on my generated input. I have written a short version to better understand you.

For some reasons this code works in Chrome, but not in Firefox. If the code becomes more complex then it does not work even in Chrome. Any ideas how can I focus on my input?

HTML:

  & lt; Articles & gt; & Lt; Div & gt; Value 1 & lt; / Div & gt; & Lt; Div & gt; Value 2 & lt; / Div & gt; & Lt; Div & gt; Value3 & lt; / Div & gt; & Lt; Div & gt; VALUE4 & lt; / Div & gt; & Lt; / Article & gt;  

CSS:

  div {width: 200px; Padding: 5px; Border: 1 px solid green; }  

Javascript:

  $ (document) .ready (function () {var currentTarget = false; $ (document) .keydown (function) { Switch (e.keyCode) {case 9: if (currentTarget! = False) {save (); moveRight (); edit (currentTarget);} break;}}); $ ("Div"). Dblclick (function () (current target! = Foal) {save ()}} edit ($ (this)); current target = $ (this);}); Function Hillright () {currentTarget = currentTarget.next ();} Edit the function (target) {var text = target.text (); Target.html ('& lt; input type = "text" id = "changeEdit" value = "' + + text + '" autofocus />');} Save the function () {CurrentTarget.html ($ ("($ (" ChangeEdit "). Val ());}}); Solution: Edino has shown a better way to add input elements. But the exact answer was made by zgood in the comments.  
 To do this, you must use the following functions to prevent tabs:  
  e.preventDefault ();  
 
 Thanks a lot for everyone!