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

因此，我正在使用javascript创建一个新的div，然后我试图将焦点放在新的div上，但它就是不起作用。我已经看了这篇文章，但仍然无法让它发挥作用。这是我的职责：

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：现在我想做的是让用户点击div并创建一个新的div。这已经发生了，用户应该能够开始在新创建的div中键入文本。当您开始键入文本时，这是不起作用的部分。您必须重新单击div以使光标移动到新div，以便开始键入新div。

您能给我们一个显示问题的示例吗？只需复制/粘贴您的代码。我不清楚如果您有一个div并对其进行关注会发生什么。你想完成什么？可能是重复的