leshikgo
@leshikgo

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

Здравствуйте. Помогите с вопросом. Мне нужно по клику добавлять новый элемент. Правильно ли в 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>");

Видел так делают, но мне что-то смущает когда в скрипте длиннющая строка или же всё нормально?
  • Вопрос задан
  • 233 просмотра
Пригласить эксперта
Ответы на вопрос 4
iiiBird
@iiiBird
Пока ты спишь - твой конкурент совершенствуется
ну тк переноси строки
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>`);
Ответ написан
Комментировать
@Volde
Ну есть вариант рендерить все это дело через document.createElement, но будет сильно больше кода. С другой стороны, если данный кусок dom используется часто и имеет логику, выносите рендеринг в функцию
Ответ написан
Комментировать
hikotih
@hikotih
Студент
Я новичок, только только изучил основы 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);
Ответ написан
Комментировать
lxsmkv
@lxsmkv
Test automation engineer
я тут подумал если у вас js оторвется или имена классов или css поменяется, будет фигово все время помнить что у вас кусок фронтенда в скрипте лежит. Mожно было бы вернуть html в html, где ему собственно место, а через скрипт клонировать этот шаблон при добавлении.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы