Js-AppendChild

Question

请不要使用JQuery。

我正在为列表做一些小代码，列表中有一个按钮，应该添加一个带有所有标签的新li-tag，如下所示

总体而言，我想知道如何按顺序附加li-> input＆label-> span（x3），类，id和类型

我正在尝试在JS中执行此操作，但是我不知道如何在标签标签内附加跨度标签

var newLi = document.createElement("li");
newLi.classList = "list-item";
newLi.id = "list-item";

var newInput = document.createElement("input");
newInput.type = "checkbox";
newInput.classList = "hidden-box";

var newLabel = document.createElement("label");
newLabel.classList = "check--label";

var spanBox = document.createElement("span");
spanBox.classList = "check--label-box";

var spanText = document.createElement("span");
spanText.classList = "check--label-text";

var spanAmount = document.createElement("span");
spanAmount.classList = "amount"

document.getElementById("addbtn").addEventListener("click", newItem);

function newItem() {

}

<ul class="list" id="list">
  <li class="list-item" id="list-item">
    <input type="checkbox" class="hidden-box" id="a" />
    <label for="list-item" class="check--label">
                          <span class="check--label-box"></span>
                          <span class="check--label-text">Product</span>
                          <span class="amount">8</span>
        </label>
  </li>
  <button id="addbtn">add+</button>