Dynamiczne tworzenie elementów za pomocą Javascriptu

Chciałbym przerobić poniższy kod html, na tworzony dynamicznie w js.

<div class="row remove"><div class="col-lg-3"><div class="input-group"><span class="input-group-addon"><input class="checkbox" type="checkbox" aria-label="..."></span>' +<input type="text back" class="form-control check" aria-label="..." value = "' + add() +'"></div></div></div>   <li style = "justify-content: space-between;">  </li>;

Zrobiłem coś takiego tylko że elementy nie tworzą się takie jak powinny, pewnie przez że nie wiem jak pozamykać poszczególne fragmenty w odpowiednich divach.

const create =  function()  {

const div = document.createElement('div');
    div.classList.add('row');
    box.appendChild(div);
    const div2 = document.createElement('div');
    div2.classList.add('col-lg-3');
    div.appendChild(div2);
    const div3 = document.createElement('div');
     div3.classList.add('nput-group');
    div2.appendChild(div3);
    const span = document.createElement('span');
    span.classList.add('input-group-addon');
    div3.appendChild(span);
    const input = document.createElement('input');
    input.classList.add('checkbox');
    input.type = "checkbox";
    const input2 =document.createElement('input');
    input2.classList.add('form-control check');
    input2.type = "text";
    input.value = add();
    div3.appendChild(input2);
    const list = document.createElement('li');
    list.style = "justify-content: space-between;";
    box.appendChild(list);
}