我想在每个“ domino”元素中添加此“ DotsDiv”元素

Question

我试图弄清楚如何将两个带有点类的元素附加到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);

}

Answer 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;
}

<div id="dominoes"></div>

Answer 2

您可以使用嵌套循环，然后每次将DotsDiv附加到domino元素。

let dominoes = document.getElementById('dominoes');
let DotsDiv = document.createElement('div');
DotsDiv.className = "dots";

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

  for (j = 0; j < 2; j++)
    domino.appendChild(DotsDiv.cloneNode());

  dominoes.appendChild(domino);
}

div {
  background: red;
  margin: 1em;
}

.domino {
  background: yellow;
}

.dots {
  background: green;
  width: 10px;
  height: 10px;
}

<div id="dominoes">
</div>