Dynamiczne tworzenie elementów za pomocą Javascriptu

pytanie zadane 27 czerwca 2017 w JavaScript przez nitrio578 Początkujący (270 p.)

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);
}

komentarz 27 czerwca 2017 przez Tomek Sochacki Ekspert (227,510 p.)

Poczytaj o createDocumentFragment żeby co chwilę nie aktualizować DOM. Pytanie tylko po co chcesz taki kod tworzyć dynamicznie? CSS rozumiem, że i tak od razy podajesz użytkownikowi wraz ze stroną, więc te kilkadziesiąt znaczków więcej nie zrobi mu różnicy i myślę, że lepiej je również podać i po prostu dać na display:none i w razie potrzeby włączyć display:block czy inną wartość w zależności od potrzeb i JS potrzebowałyś tyko do zmiany właściwości display.

komentarz 27 czerwca 2017 przez nitrio578 Początkujący (270 p.)

To jest fragment większego kodu, który tworzę listę ToDo, po wczytaniu strony pojawia się pole tekstowe i przyciski Dodaj i Usuń, a ten kod miał tworzyć listę pól z zadaniami, które wpisał użytkownik. Najpierw zrobiłem tak

    const create =  function() {
 return '<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>';
}

i to działało tylko był problem żeby usnąć zadanie, bo usuwał się najwcześniej stworzony element, a nie ten co został wybrany do usunięcia