For循环未创建Div

Question

我试图通过使用for循环在飞行中创建多个div。此代码不会给出任何结果。我的期望是它创建与id a1，a2，a3等单独的div。任何人都可以解释为什么它不？我知道还有其他的解决方案，但这对我来说是一种学习体验，我想知道为什么我的解决方案无法正常工作。

function createDiv(divid,divcontent){ 
    this.div = document.createElement("div"); 
    this.div.setAttribute("id",divid); 
    this.div.innerHTML = divcontent; 
} 

var keys = [1,2,3,4,5,6,7,8,9,0]; 
for (i=0; i<keys.length;i++){ 
    createDiv("a"+i,i); 
} 

Answer 1

您必须将该节点追加到文档中的父节点，以使其显示。像这样：

function createDiv(divid,divcontent){ 
    this.div = document.createElement("div"); 
    this.div.setAttribute("id",divid); 
    this.div.innerHTML = divcontent; 

    var parent = document.getElementById('mydiv'); 
    parent.appendChild(this.div); 
} 

Answer 2

您需要将div附加到现有的html元素。

document.getElementById("yourHtmlElementId").appendChild(this.div); 

Answer 3

你的函数只创建div你必须将它添加到DOM

function createDiv(divid,divcontent){ 
    this.div = document.createElement("div"); 
    this.div.setAttribute("id",divid); 
    this.div.innerHTML = divcontent; 
} 

var keys = [1,2,3,4,5,6,7,8,9,0]; 
for (i=0; i<keys.length;i++){ 
    var newDiv = createDiv("a"+i,i); //Store the div you just created here 
    document.getElementById('yourdivcontainer').appendChild(newDiv); //And add it to the DOM 
} 

Answer 4

function createDiv(id, content){ 
    var div = document.createElement('div'); 
    div.setAttribute("id",id); 
    div.innerHTML = content; 
    return div; 
} 
var $parent = $('#parentDiv'); // get parent div 
$parent.append(createDiv("a"+i,i));