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

148

02 января 2020, 19:00

Добрых времени суток! Проблема в следующем, возникла задача добавить созданный 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; 
}

<div class="test"> 
  <div class="test-2"></div> 
  <div class="test-2"></div> 
</div> 
<div class="test"> 
  <div class="test-2"></div> 
  <div class="test-2"></div> 
</div>

Пишет, что:

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

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

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

<div class="test"> 
  <div class="test-2"></div> 
  <div class="test-2"></div> 
</div> 
<div class="test"> 
  <div class="test-2"></div> 
  <div class="test-2"></div> 
</div>