как исправить [объект HTMLDivElement] в javascript?

Question

при проверке компонента оболочки getColors дает [объект HTMLDivElement]
как это исправить? при утешении этого getColors () выдает элемент div, есть ли способ преобразовать его в элемент

const colors = [
  {
    colorName: "Rocking red",
    shades: [
      "#E44236",
      "#B83227",
      "#D63031",
      "#E84342",
      "#FF3031",
      "#BA2F16",
      "#EC4849",
      "#FF3E4D",
      "#E71C23",
      "#EA425C",
      "#E8290B",
      "#AE1438",
      "#E83350",
      "#FF4848",
      "#FF362E",
    ],
  },
];

const wrapper = document.querySelector(".wrapper");

const getColors = (shades) => {
  const colorsEl = document.createElement("div");
  colorsEl.classList.add("colors");
  els = shades.map((shade) => {
    return `<div class="color" style="background-color: ${shade}"></div>`;
  });
  els.forEach((el) => {
    colorsEl.innerHTML += el;
  });
  console.log(colorsEl);
  return colorsEl;
};

window.onload = () => {
  const colorsContainer = document.createElement("div");
  colorsContainer.classList.add("colors-container");
  colors.map((color) => {
    colorsContainer.innerHTML = `<p class="heading">${color.colorName}</p>
                                  ${getColors(color.shades)}`;
  });
  wrapper.appendChild(colorsContainer);
};

Answer 1

Если вы проверяете результат getColors, это объект

Один из способов исправить это - использовать appendChild вместо внутреннего HTML

Взгляните на следующий пример.

const colors = [
  {
    colorName: "Rocking red",
    shades: [
      "#E44236",
      "#B83227",
      "#D63031",
      "#E84342",
      "#FF3031",
      "#BA2F16",
      "#EC4849",
      "#FF3E4D",
      "#E71C23",
      "#EA425C",
      "#E8290B",
      "#AE1438",
      "#E83350",
      "#FF4848",
      "#FF362E",
    ],
  },
];

const wrapper = document.querySelector(".wrapper");

const getColors = (shades) => {
  const colorsEl = document.createElement("div");
  colorsEl.classList.add("colors");
  const els = shades
    .map((shade) => {
      return `<div class="color" style="background-color: ${shade}">${shade}</div>`;
    })
    .join("");

  colorsEl.innerHTML = els;

  return colorsEl;
};

document.addEventListener("DOMContentLoaded", () => {
  const colorsContainer = document.createElement("div");

  colorsContainer.classList.add("colors-container");

  colors.map((color) => {
    const shades = getColors(color.shades);
    const heading = document.createElement("p");

    heading.classList.add("heading");
    heading.textContent = color.colorName;

    colorsContainer.appendChild(heading);
    colorsContainer.appendChild(shades);
  });

  wrapper.appendChild(colorsContainer);
});

<div class="wrapper"></div>