Как сократить код?

Question

[AlexandrMa]

При создании формы, приходится много много писать кода. Читал, что это лучше, чем InnerHTML. Как сократить такой вот код?

let div = document.createElement('div');

let e;

e = document.createElement('input');
e.type = "text";
e.name = "name";
e.placeholder = "Введите Имя";
div.appendChild(e);

e = document.createElement('input');
e.type = "text";
e.name = "phone";
e.placeholder = "Введите Телефон";
div.appendChild(e);

e = document.createElement('input');
e.type = "email";
e.name = "email";
e.placeholder = "Введите Email";
div.appendChild(e);

//+много элементов.

document.body.appendChild(div);

Или подскажите, как хотя бы его подсократить немного)

Comments

[Антон]

Вынести создание элемента в функцию, которая на вход принимает type,name,placholder.
Создать массив из type,name,placholder значений и вызвать функцию со значениями каждого элемента.
Станет покороче

Answer 1

[Rsa97]

const div = document.createElement('div');
[
  ['text', 'name', 'Введите имя'],
  ['text', 'phone', 'Введите номер телефона'],
  ['email', 'email', 'Введите адрес электронной почты'],
].forEach((d) => {
  const input = document.createElement('input');
  [input.type, input.name, input.placeholder] = d;
  div.appendChild(e);
}
// ...
document.body.appendChild(div);

Answer 2

[Ne7Le4Der]

https://codesandbox.io/s/boring-swirles-81e03c