我想在每个 'domino' 元素中添加这个 'DotsDiv' 元素

【问题标题】：I want to add this 'DotsDiv' element in each of the 'domino' element我想在每个 'domino' 元素中添加这个 'DotsDiv' 元素
【发布时间】：2020-02-22 19:05:21
【问题描述】：

我试图弄清楚如何将两个带有点类的元素附加到domino 类。

for (i=0; i<10; i++){

  var domino = document.createElement('div');
  domino.className = "domino";
  document.getElementById('dominoes').appendChild(domino);

}

for (j=0; j<2; j++){

  var DotsDiv = document.createElement('div');
  DotsDiv.className = "dots";
  document.querySelector('.domino').appendChild(DotsDiv);

}

【问题讨论】：

标签： javascript html arrays dom javascript-objects

【解决方案1】：

使用嵌套循环。外部创建.domino项目，内部将.dots项目添加到当前.domino。

var dominoes = document.getElementById('dominoes');
var i, j, domino, DotsDiv;

for (i = 0; i < 10; i++) {
  domino = document.createElement('div');
  domino.className = "domino";

  for (j = 0; j < 2; j++) {
    DotsDiv = document.createElement('div');
    DotsDiv.className = "dots";
    domino.appendChild(DotsDiv);
  }
  
  dominoes.appendChild(domino);
}

.domino {
  background: gold;
  border: 1px solid black;
}

.dots {
  width: 20px;
  height: 10px;
  background: silver;
  border: 1px solid red;
}

&lt;div id="dominoes"&gt;&lt;/div&gt;

【讨论】：