Можно ли ещё сократить код?

Question

[Speakermen]

Вроде код дублируется значит в теории его можно ещё сократить или вынести в функцию?

titleElement.appendChild(
  create({
    el: "span",
    className: "currentTime",
    text: "00:00",
  })
);
titleElement.appendChild(
  create({
    el: "span",
    className: "duration",
    text: "00:00",
  })
);

Answer 1

[Сергей delphinpro]

Использовать цикл

const els = [
    ["author", "Author - "],
    ["name", "Name"],
    ["currentTime", "00:00"],
    ["duration", "00:00"],
];

els.forEach(el => {
    titleElement.appendChild(
        create({
            el: "span",
            className: el[0],
            text: el[1],
        })
    );
})

2

const els = [
    { el: "span", className: "author",      text: "Author - " },
    { el: "span", className: "name",        text: "Name" },
    { el: "span", className: "currentTime", text: "00:00" },
    { el: "span", className: "duration",    text: "00:00" },
];

els.forEach( el => titleElement.appendChild( create(el) ) );

Update

А вообще это разнородные элементы. Зачем их по отдельности генерировать. Пусть будет один единственный элемент (компонент) - title. Gecnm у него будет шаблон, и пусть вы будете в этот шаблон передавать данные

function renderTitle (d) {
 return `
  <div class="title">
    <span class="currentTime">${d.time}</span>
    <span class="author">${d.author}</span> –
    <span class="name">${d.name}</span>
    <span class="duration">${d.duration}</span>
  </div>
  `;
}
xxx.insertAdjacentHTML('beforeend', renderTitle({
  author:   'Author - ',
  name:     'Name',
  time:     '00:00',
  duration: '00:00',
}));

Comments

[Speakermen]

Вау спс

[Speakermen]

Норм так код сократил благодаря вам и рекурсия пригодилась))) Да так проще единственный элемент (компонент) Хочется почувствовать разницу между custom web component, Виртуальный DOM в формате array (Многомерного массива), jsx и как можно синхронизировать виртуальный dom с реальным

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

Web Components Crash Course