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

Question

[Vadim Stepanenko]

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

<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

Answer 1

[Pavel Kuzyakin]

Думаю, createElement вам поможет: https://developer.mozilla.org/ru/docs/DOM/document...

Comments

[Vadim Stepanenko]

Рассматривал этот вариант
Но как быть с вложенной структурой?

Исходя из примера, мы получим

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?

[Шохрух Шаймардонов]

Vadim Stepanenko,

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

Именно так

[Vadim Stepanenko]

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

[Vadim Stepanenko]

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

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>

[Шохрух Шаймардонов]

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