javascript - 无法从javascript中的foreach回调将html内容输出到页面

Question

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

我不断收到以下错误:netdata.html:41 Uncaught TypeError: Cannot set property 'innerHTML' of null 。我不确定是什么原因造成的，因为我确实有一个具有正确 id 的元素 <div id="info"></div>

const clusterIPs = [
      { 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" }
    ];

    clusterIPs.forEach(pc => {
      console.log(pc);

      //   $("body").html

      document.getElementById("info").innerHTML = `
        <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>
        `;
    });
    //   console.log(clusterIPs)

Answer 1

你是

1. 在容器存在之前添加 HTML。
2. 每次在循环中替换 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 clusterIPs = [
      { 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" }
    ];


$(function() { // on page load
  const $container = $("#info");
  $.each(clusterIPs,(i, pc) => {
    $container.append(`
        <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>`)
  });
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" />

<div id="info"></div>

<script type="text/javascript" src="http://localhost:19999/dashboard.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>