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、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 3

divを既存の html 要素に追加する必要があります。

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

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