javascript - 如何在 javascript 中修复 [object HTMLDivElement]？

Question

在检查包装组件 getColors 正在产生 [object 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);
};

标签： javascriptdom

Answer 1

如果你检查getColors它的结果是一个对象

解决此问题的一种方法是使用 appendChild 而不是 innerHTML

请看下面的例子

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>