innerhtml 不打印完整的数组答案

【问题标题】：innerhtml not print full arrayinnerhtml 不打印完整的数组
【发布时间】：2022-02-14 15:35:32
【问题描述】：

我正在使用 innerhtmal 进行输出，但问题是它显示的数组值少了 1 我找不到问题。

await fetch(urlbody, bodyrequestOptions)
  .then((response) => response.json())
  .then((payload) => {
      console.log(payload)

      payload.map(({
        TRANS_NO,
        TRANS_DATE,
        DR_AMT,
        CR_AMT,
        PARTICULAR
      }, index) => {
        /* Calculatation*/
        oprningbalance += CR_AMT
        oprningbalance -= DR_AMT

        document.getElementById('output2').innerHTML += `<tr>
          <td>${index + 1}</td>
          <td class="text-tiny text-break">${moment(TRANS_DATE).format('LLL')}</td>
          <td class="text-tiny">${TRANS_NO}</td>
          <td class="text-tiny">${DR_AMT.toFixed(2)}</td>
          <td class="text-tiny">${CR_AMT.toFixed(2)}</td>
          <td class="text-tiny">${oprningbalance.toFixed(2)}</td>
          <td class="text-tiny text-break">${PARTICULAR}</td>
        </tr>`
        total_dr += DR_AMT
        total_cr += CR_AMT
      })

【问题讨论】：

不要使用innerHTML 设置现有元素的HTML。
@Teemu 为什么不呢？
@mplungjan 和document.write 一样好，这是在浪费时间，你正在失去已经设置的事件处理程序，它不被几个框架接受。现有元素的innerHTML 的唯一用途是使元素为空...
我不同意。如果您有事件处理程序，您可能会丢失，。那么你需要委托。 innerHTML 不会打扰委托。什么框架？你是说反应？我们这里没有 React，甚至 React 也有一种方法来实现 innerHTML，当你使用该框架时你不应该使用它——当你抨击它时也提供一个更好的选择

标签： javascript html dom

【解决方案1】：

试试这个

document.getElementById('output2').innerHTML = payload.map(({TRANS_NO,TRANS_DATE,DR_AMT,CR_AMT,PARTICULAR}, index) => {
  /* Calculatation*/
  oprningbalance += CR_AMT
  oprningbalance -= DR_AMT
  total_dr += DR_AMT
  total_cr += CR_AMT
  return `<tr>
          <td>${index + 1}</td>
          <td class="text-tiny text-break">${moment(TRANS_DATE).format('LLL')}</td>
          <td class="text-tiny">${TRANS_NO}</td>
          <td class="text-tiny">${DR_AMT.toFixed(2)}</td>
          <td class="text-tiny">${CR_AMT.toFixed(2)}</td>
          <td class="text-tiny">${oprningbalance.toFixed(2)}</td>
          <td class="text-tiny text-break">${PARTICULAR}</td>
        </tr>`
}).join("")

【讨论】：