通过JavaScript串联附加HTML

Question

我的代码有问题，因为在达到我的if and else条件之前，它会自动放置“ </label>”结束标记。

json.forEach(function(response) {
            var node = document.createElement("li");
            node.classList.add("__UiChecklist_item");
            node.innerHTML += `<label class="__UiProduct_list">
             <div class="__UiCheckbox">
               <input type="checkbox" value="`+response.id+`">
               <span class="check">
               <i data-feather="check"></i>
               </span>
            </div>
            <div class="__UiProduct_info">
               <div style="" class="__UiProduct_info__img">
                  <img alt="`+response.image.alt+`" src="`+response.image.src+`" >
               </div>
               <p class="__UiProduct_info__title">`+response.title+`</p>
            </div>`;
            if(response.variants.length == 1 ) {
                node.innerHTML += `<div class="ui-stack">
                    <div class="ui-stack-item">70 in stock</div>
                    <div class="ui-stack-item">Rs. 11.56</div>
                </div>`;
                node.innerHTML += `</label>`;
            }else {
                node.innerHTML += `</label>`;
            }
            selector.appendChild(node);
        });

这是代码示例

请您详细说明为什么会发生这种情况以及如何克服这一问题？