Как вставить объекты HTML между каждым дочерним объектом?

Question

Эта функция сможет вставлять элементы li в пунктирные пробелы в следующем HTML-коде?

    const shoppingList = document.getElementById("shoppinglist");
    var li = document.createElement('li');
    for (let i = 0; i < shoppingList.children.length; i++) {
        shoppingList.insertBefore(li, shoppingList.children[i]);
    
        if (i == shoppingList.children.length - 1) {
            shoppingList.appendChild(li);
        }
    }

    <ul id="shoppinglist" class="collection">
        ----
        <li class="collection-item" id="listitem:Where" draggable=true></li>
        ----
        <li class="collection-item" id="listitem:There" draggable=true></li>
        ----
    </ul>

Answer 1

Нет, не будет.

1. Вы создаете только один элемент списка, а затем пытаетесь вставить его несколько раз.Вы должны создать новый элемент в каждой итерации.

2. shoppingList.children постоянно обновляется в цикле for, поэтому условие внутри объявления for(...) не будет работать, как выожидаю.

Следующий код должен работать.Разница в том, что я беру ссылки только на существующие элементы списка и пытаюсь добавить новые элементы списка относительно них.Наконец, я просто добавляю новый элемент списка ко всему дереву, поэтому я выполняю даже условие, когда ни один из детей не присутствует.

const shoppingList = document.getElementById('shoppinglist')

let i = 0
const createLi = () => {
  const li = document.createElement('li')
  li.innerText = `New ${++i}`
  return li
}

Array.from(shoppingList.children)
  .forEach(c => shoppingList.insertBefore(createLi(), c))
  
shoppingList.appendChild(createLi())

<ul id="shoppinglist">
  <li>Original 1</li>
  <li>Original 2</li>
</ul>