can'；t在javascript中从foreach回调将html内容输出到页面

我有一个函数，它在数组的每个元素上循环，并将html内容输出到页面，同时使用数组中的元素修改一些属性。我使用

forEach

循环数组元素，并使用

innerHTML

将内容打印到页面

我一直收到以下错误：

netdata.html:41未捕获类型错误：无法将属性“innerHTML”设置为null

。我不确定是什么原因造成的，因为我确实有一个id正确的元素，

const clusterps=[
{名称：“生态集群-1”，ip:“192.168.50.101”}，
{名称：“生态集群-2”，ip:“192.168.50.102”}，
{名称：“生态集群-3”，ip:“192.168.50.103”}，
{名称：“生态集群-4”，ip:“192.168.50.104”}，
{名称：“生态集群-6”，ip:“192.168.50.105”}，
{名称：“生态集群-7”，ip:“192.168.50.106”}，
{名称：“生态集群-8”，ip:“192.168.50.107”}，
{名称：“生态集群-9”，ip:“192.168.50.108”}，
{名称：“生态集群-10”，ip:“192.168.50.110”}，
{名称：“生态集群-11”，ip:“192.168.50.111”}，
{名称：“生态集群-12”，ip:“192.168.50.112”}，
{名称：“生态集群-13”，ip:“192.168.50.113”}
];
clusterIPs.forEach（pc=>{
控制台日志（pc）；
//$（“body”）.html
document.getElementById（“信息”）.innerHTML=`
${pc.name}
`;
});
//console.log（clusterIPs）

你是

在容器存在之前添加HTML

每次在循环中替换HTML而不是追加

要使用innerHTML，您可以

window.addEventListener("load",function() {
  const container = document.getElementById("info");
  clusterIPs.forEach(pc => container.innerHTML += `....`);
})

或者使用jQuery进行追加，因为您已经加载了它

$(function() { // on page load
  const $container = $("#info");
  $.each(clusterIPs,(i, pc) => {
    $container.append(`....`);
  });
});

const clusterps=[
{名称：“生态集群-1”，ip:“192.168.50.101”}，
{名称：“生态集群-2”，ip:“192.168.50.102”}，
{名称：“生态集群-3”，ip:“192.168.50.103”}，
{名称：“生态集群-4”，ip:“192.168.50.104”}，
{名称：“生态集群-6”，ip:“192.168.50.105”}，
{名称：“生态集群-7”，ip:“192.168.50.106”}，
{名称：“生态集群-8”，ip:“192.168.50.107”}，
{名称：“生态集群-9”，ip:“192.168.50.108”}，
{名称：“生态集群-10”，ip:“192.168.50.110”}，
{名称：“生态集群-11”，ip:“192.168.50.111”}，
{名称：“生态集群-12”，ip:“192.168.50.112”}，
{名称：“生态集群-13”，ip:“192.168.50.113”}
];
$（函数（）{//在页面加载时）
const$container=$（“#info”）；
$。每个（集群，（i，pc）=>{
$container.append(`
${pc.name}
`)
});
});

脚本运行时，
div#info
元素不可用。有几种方法可以解决此问题：

将
DOMContentLoaded
事件侦听器添加到
document
对象，然后在回调中运行现有脚本
在
div#info
元素之后添加包含现有脚本的
标记
重构您编写的脚本。我个人会这样写：
表示HTML元素的组件

class Component {
  constructor() {}
  get element() {
    if(this._element) return this._element
    this._element = document.createElement('div')
    this._element.setAttribute('id', 'info')
    return this._element
  }
  get data() { return [
    { name: "eco-cluster-1", ip: "192.168.50.101" },
    { name: "eco-cluster-2", ip: "192.168.50.102" },
    { name: "eco-cluster-3", ip: "192.168.50.103" },
    { name: "eco-cluster-4", ip: "192.168.50.104" },
    { name: "eco-cluster-6", ip: "192.168.50.105" },
    { name: "eco-cluster-7", ip: "192.168.50.106" },
    { name: "eco-cluster-8", ip: "192.168.50.107" },
    { name: "eco-cluster-9", ip: "192.168.50.108" },
    { name: "eco-cluster-10", ip: "192.168.50.110" },
    { name: "eco-cluster-11", ip: "192.168.50.111" },
    { name: "eco-cluster-12", ip: "192.168.50.112" },
    { name: "eco-cluster-13", ip: "192.168.50.113" }
  ] }
  get template() { return (pc) => `
    <div class="container-fluid">
      <div><h1>${pc.name}</h1></div>
      <div class="row">
        <div class="col-md">
          <div
            data-title="CPU"
            data-netdata="system.cpu"
            data-chart-library="dygraph"
            data-after="-600"
            data-host="http://${pc.ip}:19999/"
          ></div>
        </div>
        <div class="col-md">
          <div
            data-title="RAM"
            data-netdata="system.ram"
            data-chart-library="dygraph"
            data-after="-600"
            data-host="http://${pc.ip}:19999/"
          ></div>
        </div>
      </div>
      <div class="row">
        <div class="col-md">
          <div
            data-title="Disk I/O"
            data-netdata="system.io"
            data-chart-library="dygraph"
            data-after="-600"
            data-host="http://${pc.ip}:19999/"
          ></div>
        </div>
        <div class="col-md">
          <div
            data-title="Network Bandwidth"
            data-netdata="system.net"
            data-chart-library="dygraph"
            data-after="-600"
            data-host="http://${pc.ip}:19999/"
          ></div>
        </div>
      </div>
    </div>
  ` }
  insertElement() {
    document.querySelector('body')
      .insertAdjacentElement('afterbegin', this.element)
    return this
  }
  clearElement() {
    this.element.innerHTML = ''
    return this
  }
  render() {
    if(!this.element.parentElement) {
      this.insertElement()
    } else {
      this.clearElement()
    }
    this.data.forEach((dataItem) => {
      let template = document.createRange().createContextualFragment(
        this.template(dataItem)
      )
      this.element.appendChild(template)
    })
    return this
  }
}

document.addEventListener('DOMContentLoaded', (event) => {
  let component = new Component()
  component.render()
})


共享
所在的HTML…@LeonardoSeccia可以看到页面的整个HTML以及js。如果在js code之后出现
div#info
，则在函数中它将被视为空。根据提供的链接，就是这种情况。@LeonardoSeccia我以前试过JQiery，这增加了其他问题，它将
$（）。
作为参考<代码>未捕获引用错误：$未定义

是抱歉，不需要jQuery。。。u_mulder和mplungjan解释了代码不起作用的原因。

document.addEventListener('DOMContentLoaded', (event) => {
  let component = new Component()
  component.render()
})