title: setting focus on input element created programmatically
body: <p>I have problems setting the focus on an input element that has been created on the fly and which has had and lost focus previously.  I've distilled it to this simple code:</p>
  
  <p>I expect the focus to ping-pong between the two input elements as you type, but on Firefox and Chrome the focus stays in the first text box after the second has been created, received focus, and sent focus back to the first.  Why is this?</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script type="text/javascript"&gt;
  &lt;!--
  function onkey(event) {
      if(event.target.id == "b") {
          var c = document.getElementById("c");
          if(!c) {
              document.getElementById("a").innerHTML += "&lt;br/&gt;&lt;input id=\"c\" type=\"text\"/&gt;";
              c = document.getElementById("c");
              document.getElementById("status").textContent = "created c "+c
          } else {
              document.getElementById("status").textContent = "activing c "+c;
          }
          c.onkeydown = onkey;
          c.focus();
      } else {
          document.getElementById("status").textContent = "activing b";
          document.getElementById("b").focus();
      }
  }
  
  function test() {
      var b = document.getElementById("b");
      b.onkeydown = onkey;
      b.focus();
  }
  //--&gt;
  &lt;/script&gt;
  &lt;body onload="test();"&gt;
  &lt;noscript&gt;
  Sorry, you need javascript.  Not much to see here otherwise; move along.
  &lt;/noscript&gt;
  &lt;div id="status"&gt;&lt;/div&gt;
  &lt;div id="a"&gt;
  &lt;input id="b" type="text"/&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>