javascript - For 循环不创建 Div

Question

我正在尝试使用 for 循环动态创建多个 div。此代码没有给出任何结果。我的期望是它可以创建带有 id a1、a2、a3 等的单独 div。谁能解释为什么它不这样做？我知道在 SO 上还有其他解决方案，但这对我来说是一次学习经历，我想知道为什么我的解决方案不起作用。

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));