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

您的函数仅创建必须将其添加到DOM的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++){
    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));

对于循环不创建Div

4 个答案: