在javascript中设置焦点在新创建的div

Question

所以我正在使用javascript创建一个新的div，然后我试图将焦点设置在新的div上，但它只是不起作用。我查看了这篇文章Difficulty setting focus on newly created object in javascript，但我仍然无法让它发挥作用这是我的功能：

function overlayDIV(clickedId) {

  // see if div already exists if not create it
  if (!document.getElementById("overlay" + clickedId)) {
    var div = document.createElement("div");
    div.id = "overlay" + clickedId;
    div.style.width = "12px";
    div.style.height = "12px";
    div.style.background = "red";

    div.style.position="absolute";
    div.style.zIndex = "1";

    //added this line after reading the other post, 
    div.setAttribute('tabindex', '0');

    document.getElementById(clickedId).appendChild(div);
  }

  document.getElementById("overlay" + clickedId).focus();
}

我不知道我做错了，如果有人可以提供帮助那将是非常棒的谢谢。

编辑：
所以我做了一个JSfiddle：http://jsfiddle.net/m7cQA/现在我想要做的是让用户点击div并创建一个新的div（这已经发生）并且用户应该能够刚开始输入新创建的div（这是不工作的部分）当你开始输入文本时，就会进入新div后面的父div。您必须重新单击div才能使光标移动到新div以便开始输入。