Как создать элементы с разными атрибутами?

Question

Мне нужно создать n div элементов внутри body. Все div элементы должны иметь один общий класс, а также каждый должен иметь свой личный атрибут.

Пока что получился такой код:

for (var i = 0; i < 5; i++) {
  const divEl = document.createElement('div');
  document.body.appendChild(divEl).setAttribute('class', 'div');
}

Как мне дополнительно к элементу добавить свой атрибут? Ибо сейчас они создаются лишь с классом "div", а мне нужны еще атрибуты.

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

Answer 1

не вижу смысла искать какой-то мудреный способ. вот этот читабельный и обычный:

for (let i = 0; i < 5; i++) {
    const divEl = document.createElement('div');
    divEl.classList.add('div');
    divEl.setAttribute('myAttr', 'value');
    document.body.appendChild(divEl);
}

Answer 2

Можно создать массив конфигураций для div-ов и отталкиваться от него:

const divConfigs = [
  { id: 1 },
  { id: 2, pid: 20 },
  { tid: 300 }
];

for (let divConfig of divConfigs) {
  let div = document.createElement("div");
  div.setAttribute("class", "div");

  for (let attribute in divConfig) {
    div.setAttribute(attribute, divConfig[attribute]);
  }

  document.body.appendChild(div);
}

Конфигурация представляет собой объект, в котором ключами являются названия атрибутов, а значениями - значения соответствующих атрибутов

БЛОГ НА HUSL

Как создать элементы с разными атрибутами?

Ответы (2 шт):