将span追加到相应的li元素（Javascript）

我是JS新手，在将跨距添加到正确位置时遇到问题。我有一个清单，有一个可选的文本输入。选中复选框且文本输入具有值时，我希望显示复选框值和文本输入值的文本。如果文本输入为空，我只想显示复选框的值。我试过这个：

    function addBreakfastCheck1(e) {
      e.preventDefault();
      let checkboxes = document.querySelectorAll('input[name="protein"]:checked');
      let servingTexts = document.querySelectorAll('input[name="servingTexts1"]');
      let li;
      let span;
      checkboxes.forEach(function(checkbox) {
        if (checkbox.checked) {
          li = document.createElement('li');
          li.className = 'list-group-item';
          li.appendChild(document.createTextNode(checkbox.value));
          breakfastResult1.appendChild(li);
        }
      })
    
      servingTexts.forEach(function(servingText) {
        if (servingText && servingText.value) {
          span = document.createElement('span');
          span.appendChild(document.createTextNode(' ' + servingText.value));
          li.appendChild(span)
        }
      })
    }

---

它将所有文本输入值附加到提交时的最后一个li元素。如何将每个span附加到相应的li元素？

您不需要两个循环。您应该循环检查所有复选框（不仅仅是选中的复选框）

forEach（）

将数组索引作为另一个参数发送，您可以使用该参数将其索引到文本框中以获取相应的值

函数addBreakfastCheck1（e）{
e、 预防默认值（）；
让复选框=document.querySelectorAll（'input[name=“protein”]”）；
让servingTexts=document.querySelectorAll（'input[name=“servingTexts1”]”）；
复选框。forEach（函数（复选框，i）{
如果（复选框。选中）{
设li=document.createElement（'li'）；
li.className='列表组项'；
li.appendChild（document.createTextNode（checkbox.value））；
设servingText=servingTexts[i]；
if（servingText&&servingText.value）{
设span=document.createElement（'span'）；
appendChild（document.createTextNode（“”+servingText.value））；
李.儿童（span）
}
早餐结果1.婴儿（李）；
}
})
}

您没有名为：BreakfastResult1的元素，我建议您将HTML部分添加到问题中，更好的是，添加给您带来麻烦的整个代码示例