Как через класс добавлять списки на страницу?

Question

[L1nw0od]

Доброго времени суток.
Я создал в JS класс который создает список.

<div class="new__block">

</div>

class NewElement {
	constructor(selector, classes, options) {
		this.$el = document.createElement(selector)
		this.item = options.items
		this.$el.className = `${classes}`

		const innerHTML = this.item.map(i => {
			return `<li data-info='${i.data_id}'>${i.text}</li>`
		}).join('')

		const wrapper = document.querySelector('.new__block')
		this.$el.insertAdjacentHTML('afterbegin', innerHTML)
		wrapper.insertAdjacentElement('afterbegin', this.$el)
	}
}


const newElDiv = new NewElement ('ul', 'test_class', {
	items: [
		{text: 'Москва', data_id: 'tt'},
		{text: 'Какой - то текст', data_id: 'tt2'},
		{text: 'текст', data_id: 'tt3'}
	]
 })

---
Все хорошо - списки новые создаются.
Но я хочу сделать так чтоб я мог эти списки создавать со странички сайта.
Вот к примеру захожу на страничку и у меня есть поля для создания списка, и в это поле мы передаем элемент списка, также для него пишем дата атрибут. После чего все что мы заполнили, - мы должны отобразить снизу в блоке.
---
Я чуть не понимаю как это сделать правильно.
---

Answer 1

[MrColdCoffee]

как пример (для понимания принципа)

Comments

[L1nw0od]

Спасибо, постараюсь подумать как это можно реализовать чуть иначе)
--
Скажите а можно ли это все реализовать через форму. И как-то деструктуризировать это?
ЧТоб прям максимально правильно и компактно это происходило. Я в будущем хочу отправлять это на сервер.
А то как сейчас просто учусь это все делать - задал такой вопрос на форум.
-

[L1nw0od]

Может это было бы более правильным реализовать через классы? Я просто думаю как это в будущем делать через класс или функцию то как эта форма будет увеличиваться, атрибуты будут добавляться и т.д,
--
Опыта в этом нет и я не знаю как было бы правильно, но гавно делать не хочется (

[L1nw0od]

Может это было бы правильно в массив/обьект какой-то собрать и потом отправить на сервер или как - вообзе без понимания?(

[MrColdCoffee]

L1nw0od,

можно ли это все реализовать через форму.

можно и даже нужно
посмотрите про сериализацию

Может это было бы более правильным реализовать через классы?

нет, в классах нет необходимости

варианты реализации могут быть разные

[L1nw0od]

MrColdCoffee, Могли бы подсказать как обратится через форму к инпутам всем которые в ней?
Создавать для каждого инпута переменную или можно как-то проще, если к примеру этих полей будет более 10-ти и в будущем они будут увеличиваться. Как тут быть?

[L1nw0od]

MrColdCoffee, вот есть форма

<form action="#" class="" id="form__v1">
		<br>
		<input type="text" name="f_name" class="c_name" id="" placeholder="Название" value="TestValueStandart">
		<br>
		<input type="text" name="f_dataAtt" id="" placeholder="Дата атрибут">
		<br>
		<button type="submit">Отправить форму.</button>
	</form>

const form1 = document.querySelector('#form__v1')
const inputNamed = document.querySelector('.c_name')
const btn = document.querySelector('#form__v1 > button')

btn.addEventListener('click', (event) => {
	event.preventDefault()
	console.log('click btn')

})

Но как обращаться к этим инпутам и брать их значения с поле name в будущем - я не понимаю.
У меня ощущение что вот такая запись это ужас просто (

const inputNamed = document.querySelector('.c_name')