Javascript 如何使用JS引用动态创建的div

因此，我正在创建div的onclick，并以增量方式为它们提供更大的Id。然后我想更改每个div的CSS属性，但似乎无法使用

document.getElementById

选择它

很明显，我遗漏了一些非常简单的东西，任何建议或阅读都将不胜感激

一些相关的Javascript：

function createDiv(){
    i++;
    var newDiv = document.createElement("div");
    newDiv.id = "newDiv"+i;
    var e = document.getElementById("newDiv1");
    e.innerHTML = "hello";
    e.className = "newDivs";
    var x = 50*i;
    e.style.left = x+"px";
    e.style.top = 200+"px";
    //but nothing appears
}

---

您尚未将

div

附加到DOM树，应先附加它，然后尝试获取其引用：

function createDiv(){
    i++;
    var newDiv = document.createElement("div");
    newDiv.id = "newDiv"+i;
    document.body.appendChild(newDiv); // <--- Append it here
    var e = document.getElementById("newDiv1");
    e.innerHTML = "hello";
    e.className = "newDivs";
    var x = 50*i;
    e.style.left = x+"px";
    e.style.top = 200+"px";
    //but nothing appears
}

函数createDiv（）{
i++；
var newDiv=document.createElement（“div”）；
newDiv.id=“newDiv”+i；
document.body.appendChild（newDiv）；//您需要将div追加到dom中请参见fiddle


}
您尚未将该元素添加到页面中，因此它不会显示

您不需要使用
getElementById
来获取对元素的引用，因为您已经有了对元素的引用

例如：

function createDiv(){
    i++;
    var e = document.createElement("div");
    e.id = "newDiv"+i;
    document.body.appendChild(e);
    e.innerHTML = "hello";
    e.className = "newDivs";
    var x = 50*i;
    e.style.left = 100+"px";
    e.style.top = 200+"px";
}

演示：

function createDiv(){
    i++;
    var e = document.createElement("div");
    e.id = "newDiv"+i;
    document.body.appendChild(e);
    e.innerHTML = "hello";
    e.className = "newDivs";
    var x = 50*i;
    e.style.left = 100+"px";
    e.style.top = 200+"px";
}