Как правильно добавлять элемент по клику?

Question

[axblue]

Здравствуйте. Помогите с вопросом. Мне нужно по клику добавлять новый элемент. Правильно ли в append запихивать код самого элемента если элемент не очень маленький?
Что-то типо такого:

flavors.append("<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>");

Видел так делают, но мне что-то смущает когда в скрипте длиннющая строка или же всё нормально?

Answer 1

[iBird Rose]

ну тк переноси строки

flavors.append(`<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>`);

Answer 2

[Павел]

Ну есть вариант рендерить все это дело через document.createElement, но будет сильно больше кода. С другой стороны, если данный кусок dom используется часто и имеет логику, выносите рендеринг в функцию

Answer 3

[Марат Царик]

Я новичок, только только изучил основы 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);

Answer 4

[Alexej Simakov]

я тут подумал если у вас js оторвется или имена классов или css поменяется, будет фигово все время помнить что у вас кусок фронтенда в скрипте лежит. Mожно было бы вернуть html в html, где ему собственно место, а через скрипт клонировать этот шаблон при добавлении.