Как правильно вывести такой код в innerHtml?

Question

[jeka-3]

albumTrack.innerHTML = 
  let wrap = document.createElement('div');
  wrap.classList.add('album__item');

  albumTrack.appendChild(wrap);

  let itemAlbumWrap = document.createElement('div');
  itemAlbumWrap.classList.add('album__item__wrap');

  let title = document.createElement('div');
  title.classList.add('album_title');

  wrap.appendChild(title);
  wrap.appendChild(itemAlbumWrap);


  title.innerHTML = `
        Альбом ${arr2[number].albumId}
      `

  let itemAlbum = document.createElement('div');
  itemAlbum.classList.add('album__photo');

  itemAlbumWrap.appendChild(itemAlbum);

  arr2[number].albums.forEach(element => {

    wrap.innerHTML += `
          <div>${element.title}</div>
        `
  });
;

Comments

[Дмитрий Беляев]

Что Вы хотите получить в итоге? Что-то мне подсказывает, что Вам не innerHtml нужен, просто Вы не знаете чем его заменить. Опишите проблему, попробую подсказать.

[jeka-3]

Дмитрий Беляев мне нужно переключатся между значениями массива, [0] [1] и т.д. Только если я использую что-то другое выводится несколько значений, а мне нужно всегда одно. innerHtml =, подходит как раз. Что именно другое можно использовать в таком случае?

[Дмитрий Беляев]

jeka-3, если правильно понял, у Вас есть массив arr2 и Вам в разные моменты времени нужно показывать из него разные данные, соответствующие индексу number, при этом старые данные должны из DOM удалятся. Я правильно понял?

[jeka-3]

Дмитрий Беляев, да, всё верно

[Дмитрий Беляев]

jeka-3, накидал в ответе, как бы я подобное делал

Answer 1

[Дмитрий Беляев]

// небольшая функция хелпер, чтоб писать меньше кода:
const appendNewDiv = parent => parent.appendChild(document.createElement('div'));

// создадим основные эллементы
const wrap = appendNewDiv(albumTrack);
const title = appendNewDiv(wrap);
const itemAlbumWrap = appendNewDiv(wrap);
const itemAlbum = appendNewDiv(itemAlbumWrap);

wrap.classList.add('album__item');
title.classList.add('album_title');
itemAlbumWrap.classList.add('album__item__wrap');
itemAlbum.classList.add('album__photo');

// сюда будем складывать элементы, которые должны удалятся при смене number
let elements = [];

// функция, через которую меняем отображаемые данные по number
const renderByNumber = number => {
    const {albumId, albums} = arr2[number];
    elements.forEach(e => wrap.removeChild(e));
    title.textContent = `Альбом ${albumId}`;
    elements = albums.map(album => {
        const e = appendNewDiv(wrap);
        e.textContent = album.title;
        return e;
    });
};

// при изменении number теперь просто вызываем
renderByNumber(number);

Comments

[jeka-3]

Дмитрий Беляев всё равно идет дублирование, а в elements ничего не записывается(

[Дмитрий Беляев]

jeka-3, а Вы renderByNumber по событию вызываете?

[jeka-3]

Дмитрий Беляев, прощу прощения. Большое спасибо за помощь, вы очень помогли.