Коллеги, есть такой пример (далее опишу проблему в комментариях в коде):
//Код ниже работает, но почему то не верно
// DIV добавляется после SPAN
// но если раскомментировать закомментированные строки
//
// то работает, но DIV добавляется только в первый элемент
const li = document.querySelectorAll('li'),
//span = document.querySelector('span'), //раскоментировать
span = document.querySelectorAll('span'), // закоментировать
bg = document.createElement('div');
li.forEach(s => {
s.addEventListener('click', () => {
let bg_passive = bg.cloneNode();
bg_passive.className = 'bg-passive';
if (s.childNodes.length <= 1) {
//s.insertBefore(bg_passive, span); // раскоментировать
s.insertBefore(bg_passive, s.span); // закоментировать
console.log(s.childNodes);
}
})
})
li {
width: 30px;
height: 100%;
list-style: none;
}
span {
border: 1px solid black;
display: block;
background: green;
}
<menu>
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
<li><span>5</span></li>
<li><span>6</span></li>
</menu>