我试图在innerHTML中更改它，但它显示[object Object]

Question

我正在尝试更改

innerHTML

以便动态更改页面。

但是显示为

[object Object]

。

document.getElementById("Page").innerHTML = 
 <div>
   some code...
 </div>

虽然可以将内容转换为如下所示的字符串，但是写入效率会明显降低。

document.getElementById("Page").innerHTML = "<div> some code............ </div>"

这种情况我该怎么办？

Answer 1

function generateHTML(data) {
  return `
    <div>
      <h1>${data.title}</h1>
      <p>${data.content}</p>
      <ul>
        ${data.items.map(item => `<li>${item}</li>`).join('')}
      </ul>
    </div>
  `;
}

const pageData = {
  title: "Dynamic Content",
  content: "This is some dynamic content.",
  items: ["Item 1", "Item 2", "Item 3"]
};

document.getElementById("Page").innerHTML = generateHTML(pageData);

尝试上面，（不需要解释）我只是做了一个单独的函数以便更好地阅读代码。让我知道它是否有效！