Марат Царик

Я новичок, только только изучил основы JS. Но подобные вещи я делал так :

var a =  document.createElement("div");
a.className = 'col l6 flavor animated fadeIn';
// а теперь, если у нас внутри этой обвёртки будет постоянный контент - тогда так:
a.innerHTML = "<div class='flavor-bottle'></div> <div class='flavor-desrc'><div class='input-field'> <input type='text' id='autocomplete-input' class='autocomplete' name='names[]'> <label for='autocomplete-input'>name</label> </div> <div> <input name='group' type='radio' id='inPG' checked/> <label for='inPG'>PG</label> <input name='group1' type='radio' id='inVG'/> <label for='inVG'>VG</label> </div> </div>";
// если нет - тогда весь внутренний контент так же через document.createElement ,  .className (или classList) и appendChild
flavors.appendChild(a);

Вообще могу ошибаться, но по моему всё же лучше (для памяти) создать переменную, и внести в неё эту конструкцию. типо

var e = "<div class='col l6 flavor animated fadeIn'> <div class='flavor-bottle'></div> <div class='flavor-desrc'><div class='input-field'> <input type='text' id='autocomplete-input' class='autocomplete' name='names[]'> <label for='autocomplete-input'>name</label> </div> <div> <input name='group' type='radio' id='inPG' checked/> <label for='inPG'>PG</label> <input name='group1' type='radio' id='inVG'/> <label for='inVG'>VG</label> </div> </div> </div>";
flavors.appendChild(a);