Как создать множество одинаковых элементов?

[Alexander3928]

Есть ul в нем три li. У li одинаковые классы и label, input тоже все одинаковое меняются только значение в атрибутах name, for, id, type

<ul class="elem">

           <li class="item">
               <label class="elem__label" for="elemName"></label>
               <input type="text" class="elem__input" id="elemName"/>
           </li>

<li class="item">
               <label class="elem__label" for="elemTel"></label>
               <input type="tel" class="elem__input" id="elemTel"/>
           </li>

<li class="item">
               <label class="elem__label" for="elemMask"></label>
               <input type="text" class="elem__input" id="elemMask"/>
           </li>

</ul>

У li,label,input классы одинаковые. Можно ли как-то создать эти элементы li с label и input динамически не используя innerHTML и цыкла for. Опять же, из-за того что классы у этих элементов одинаковые не получается сделать через const

[Malleys]

У li одинаковые классы и label, input тоже все одинаковое меняются только значение в атрибутах name, for, id, type

Из вашего примера видно, что это не так. У них разные имена классов. Может вы имели в виду, что эти классы не меняются? Да, между «похожестью» и неизменяемостью есть разница!

У li,label,input классы одинаковые.

Нет, у них разные имена классов. Но может вы намекаете, что у этих атрибутов одинаковые имена, а не одинаковые значения атрибутов? Да, между именем и значением атрибута есть разница!

Можно ли как-то создать эти элементы li с label и input динамически не используя innerHTML и цыкла for.

Да! Вам нужно создать функцию, которая будет создавать очередной элемент списка с ярлыком и текстовым полем. Вызвав такую функцию определённое количество раз, вы получите точно такое же количество элементов списка.

Вот пример...

<ul class="elem"></ul>

<script>
	function createListItemWithInputAndLabel({ name = "", label = "", type = "text" }) {
		var item = document.createElement("li");
		item.className = "item";
		
		var htmlLabel = document.createElement("label");
		htmlLabel.className = "elem__label";
		htmlLabel.textContent = label;
		htmlLabel.addEventListener("click", () => input.focus());
		item.appendChild(htmlLabel);
		
		var input = document.createElement("input");
		input.className = "elem__input";
		input.type = type;
		input.name = name;
		item.appendChild(input);
		
		return item;
	}
	
	var data = [{
		label: "Name"
	}, {
		label: "Phone",
		type: "tel"
	}, {
		label: "Mask"
	}];
	
	var unorderedList = document.querySelector("ul.elem");

	data.map(createListItemWithInputAndLabel).forEach(item => {
		unorderedList.appendChild(item);
	});
</script>

<!-- Далее ненужные стили, просто чтобы было похоже на форму -->
<style>
ul.elem {
	padding: 0;
}
li.item {
	display: grid;
	margin: 0.5em 0;
}
</style>

Опять же, из-за того что классы у этих элементов одинаковые

Here we go again! Нет, даже если говорить про представление этих элементов в JS, у этих элементов всё-таки разные классы — HTMLLIElement, HTMLLabelElement и HTMLInputElement. Вам стоит найти у них одинаковые суперклассы и понять, что между классом и суперклассом есть разница!

не получается сделать через const

А var пробовали? Видите, выше с var получилось сделать! Как всё запутанно! Поменяйте в примере выше var на const и оно всё-равно будет продолжать работать! Какой большой чудес?

[ksa]

не получается сделать через const

const используется для определения "не изменяемой" переменной...
Если предполагается ее модификация - нужно использовать let.

[Malleys]

нужно использовать let.

А ещё можно описать при помощи свойств в классе, к тому же ещё есть приватные свойства...

[Alexander3928]

Вот использовал let. Тоже ошибка что элемент уже обьвлен. Точно так же если я использую const

let formItem = document.createElement("div")
  formItem.classList.add("form__item");

  let formLabel = document.createElement("label")
  formLabel.classList.add("form__label")
  formLabel.setAttribute("for", "formName")
  formLabel.textContent = "Ваше имя*:"

  let formInput = document.createElement("input")
  formInput.classList.add("form__input")
  formInput.setAttribute("id", "formName")
  formInput.setAttribute("type", "text")
  formInput.setAttribute("name", "name")

  let formError = document.createElement("span")
  formError.classList.add("form__error")

 [QUOTE] //? На let тоже не работает выдает ошибку что индентификатор formItem уже обьявлен [/QUOTE]

  let formItem = document.createElement("div")
  formItem.classList.add("form__item");

  let formLabel = document.createElement("label")
  formLabel.classList.add("form__label")
  formLabel.setAttribute("for", "formTelephon")
  formLabel.textContent = "Укажите телефон*:"

  let formInput = document.createElement("input")
  formInput.classList.add("form__input")
  formInput.setAttribute("id", "formTelephon")
  formInput.setAttribute("type", "tel")
  formInput.setAttribute("name", "telephon")

  let formError = document.createElement("span")
  formError.classList.add("form__error")

[Alexander3928]

Я let тоже так пробывал, они повторяются и дает ошибку "индентификатор formItem уже обьявлен"

[ksa]

ошибка что элемент уже обьвлен

Так не нужно в "одном блоке" делать несколько раз объявление переменной.

Прежде чем писать на каком-то ЯП нужно почитать хотя бы его основы.
https://learn.javascript.ru

В противном случае будешь "спотыкаться" на "каждом шагу"...

[Alexander3928]

... я знаю это, это просто пример что классы одинаковые и элементы, а разные только значение атрибутов

[Malleys]

я знаю это, это просто пример что классы одинаковые и элементы, а разные только значение атрибутов

Вам написали ответ в сообщении №2 с работающим примером.

Вот использовал let. Тоже ошибка что элемент уже объявлен. Точно так же если я использую const

А зачем вам одно и тоже писать, когда можно объявить функцию и её вызывать с необходимыми данными?

Вам нужно создать функцию, которая будет создавать очередной элемент списка с ярлыком и текстовым полем. Вызвав такую функцию определённое количество раз, вы получите точно такое же количество элементов списка.

Почему вам запрещено извлечь данные в отдельную структуру, например так...

[{
	htmlFor: "formName",
	labelText: "Ваше имя*:",
	inputType: "text",
	inputName: "name"
}, {
	htmlFor: "formTelephon",
	labelText: "Укажите телефон*:",
	inputType: "tel",
	inputName: "telephon"
}]

... и затем вот эти данные передать в функцию, которая создаёт label и input с его родительским элементом?

[Vlasenko Fedor]

В качестве примера :-)

<div id="test"></div>
<script>
    const buildElement = (tagName, props = {}, attributes = {}) => {
        const el = Object.assign(document.createElement(tagName), props);
        for (let key in attributes) el.setAttribute(key, attributes[key]);
        return el;
    }
    const label = buildElement('label', {
        className: 'form__label',
        innerText: 'Best Label',
    }, {
        for: "formName",
        onclick: "alert(this.tagName)"
    });
    test.insertAdjacentHTML('beforeend', label.outerHTML)
</script>