Как правильно сгенерировать и вставить элемент?

Question

Vadim Stepanenko @Vadim1899

JavaScript

Как правильно сгенерировать и вставить элемент?

При нажатии на кнопку, нужно создать новый элемент и вставить его на страницу. Структура элемента многоуровневая:

<tr class="item">
	<td>
		<input name="s_title_1" placeholder="Название варианта" type="text" id="s_title" class="validate">
	</td>
	<td>
		<input name="s_value_1" placeholder="Значение" type="text" id="s_value" class="validate">
	</td>
</tr>

Плюс ко всему, у s_value_1 и s_title_1 должна быть итерация (s_value_1, s_value_2, s_value_3 ...). С этим проблем нет: создаем скрытый инпут, в котором находится кол-во итемов. При нажатии на кнопку "добавить", получаем значение скрытого инпута и делаем автоинкримент.

Теперь вопрос: как лучше "генерировать" разметку элемента?

Делать так мне кажется не вариант

let tmp = '<tr class="item"> <td> <input name="s_title_'+value+'" placeholder="Название варианта" type="text" id="s_title" class="validate"> </td> <td> <input name="s_value_'+value+'" placeholder="Значение" type="text" id="s_value" class="validate"> </td> </tr>'

, выглядит слишком костыльно.
Может есть какие-нибудь варианты получше?
Из библиотек только jquery

Вопрос задан более трёх лет назад
146 просмотров

Комментировать

Подписаться 1 Простой Комментировать

Решения вопроса 1

5 комментариев

Vadim Stepanenko @Vadim1899 Автор вопроса
Рассматривал этот вариант
Но как быть с вложенной структурой?

Исходя из примера, мы получим
var newDiv = document.createElement("tr"); newDiv.innerHTML = '<td> <input name="s_title_'+value+'" placeholder="Название варианта" type="text" id="s_title" class="validate"> </td> <td> <input name="s_value_'+value+'" placeholder="Значение" type="text" id="s_value" class="validate"> </td>';

То есть по-сути уберем разметку одного уровня.

Или же createElement для input, далее createElement для td, далее засовываем второй в первый, далее аналогично для второго td и потом засовываем два td в tr?
Написано более трёх лет назад
Шохрух Шаймардонов @joeberetta Куратор тега JavaScript

Vadim Stepanenko,

Или же createElement для input, далее createElement для td, далее засовываем второй в первый, далее аналогично для второго td и потом засовываем два td в tr?

Именно так

Написано более трёх лет назад
Vadim Stepanenko @Vadim1899 Автор вопроса

Шохрух Шаймардонов, ок, спасибо

Написано более трёх лет назад

Vadim Stepanenko @Vadim1899 Автор вопроса

Шохрух Шаймардонов, подскажи плиз, делаю так:

let input_title = document.createElement("input");
 				input_title.className = "validate";
 				input_title.setAttribute('name', "s_title_"+variantsCount);
 				input_title.setAttribute('placeholder', "Название варианта");
 				input_title.setAttribute('type', "text");
 				input_title.setAttribute('id', "s_title");

let td_title = document.createElement("td");
 				td_title.innerHTML = input_title;

, а он выводит
<td>[object HTMLInputElement]</td>

Написано более трёх лет назад

Шохрух Шаймардонов @joeberetta Куратор тега JavaScript

Vadim Stepanenko, все верно. Потому что элементы созданные через create* Нужно вставлять методом appen{Child}
читать!

Написано более трёх лет назад