Почему функция insertBefore добавляет элемент не туда, куда я хочу?

//Код ниже работает, но почему то не верно 
// 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>