Хочу попытаться понять это. Я хочу добавить два элемента с классом точек к классу домино.

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

}
1
Usman Rajput

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>

Используйте вложенные циклы. Внешний создает элементы .domino , а внутренний добавляет элементы .dots к текущему элементу .domino .

var dominoes = document.getElementById('dominoes');

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

  for (j = 0; j < 2; j++) {
    var 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>
58575277