Проблема добавления элемента через appendChild

#javascript

Добрых времени суток! Проблема в следующем, возникла задача добавить созданный span
в каждый 2-ой(!) элемент в блоке div.test, как это можно сделать? Пытался следующим
образом:



var element = document.createElement("span");
element.classList.add("span-test");
var index = 1;

[...document.querySelectorAll(".test")].forEach(test => [...test.querySelectorAll(".test-2")[index]].forEach(test2
=> test2.appendChild(element)));
.span-test {
  height: 30px;
  width: 30px;
  background-color: red;
}

  

  



  

  






Пишет, что:


  Uncaught TypeError: test.querySelectorAll[index] is not iterable


Подскажите, что делаю не так? Как можно добавить элемент в каждый 2-ой элемент div.test-2
(Обязательно в родителе div.test);
    

Ответы

Ответ 1

Вы не можете добавлять один и тот же элемент в несколько родителей и ожидать, что
он чудесным образом размножится.

document.querySelectorAll(".test").forEach(test => {
  test.querySelectorAll(".test-2").forEach((test2, index) => {
    if (index % 2 == 1) {
      var element = document.createElement("span");
      element.classList.add("span-test");
      test2.appendChild(element);
    }
  });
});






document.querySelectorAll(".test > .test-2:nth-child(2n)").forEach(test2 => {
  var element = document.createElement("span");
  element.classList.add("span-test");
  element.textContent = "TEST";
  test2.appendChild(element);
});
.span-test {
  height: 30px;
  width: 30px;
  background-color: red;
}

.test {
  border: 2px solid green;
  margin:3px;
}

.test-2 {
  border: 1px solid black;
  min-height:5px;
  margin:3px;
}