Question

所以我正在创建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
}

Answer 1

你没有将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
}

Answer 2

你需要将div添加到dom中，并将其添加到小提琴中

http://jsfiddle.net/coqkg5oz/5/

function addDiv() {
    var objTo = document.getElementById('container')
    var divtest = document.createElement("div");
    divtest.innerHTML = "new div"
   objTo.appendChild(divtest)

}

Answer 3

您还没有将该元素添加到页面中，这就是它没有显示的原因。

您不需要使用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";
}

演示：http://jsfiddle.net/Guffa/coqkg5oz/8/

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

3 个答案: