未捕获（承诺中）类型错误：无法读取 null 的属性“附加”答案

【问题标题】：Uncaught (in promise) TypeError: Cannot read property 'append' of null未捕获（承诺中）类型错误：无法读取 null 的属性“附加”
【发布时间】：2020-11-08 00:34:19
【问题描述】：

我正在尝试制作单页应用程序，当我尝试将 div 元素附加到页面时出现错误：

Uncaught (in promise) TypeError: Cannot read property 'append' of null

这是我的 javascript 代码

function load_mailbox(mailbox) {

  // Show the mailbox and hide other views
  document.querySelector('#emails-view').style.display = 'block';
  document.querySelector('#compose-view').style.display = 'none';
  document.querySelector('#compose-error').style.display = 'none';


  // Show the mailbox name
  document.querySelector('#emails-view').innerHTML = `<h3>${mailbox.charAt(0).toUpperCase() + mailbox.slice(1)}</h3>`;

  // list of mails
  fetch(`/emails/${mailbox}`)
  .then(response => response.json())
  .then(emails => {
      // Print emails
      var x = emails['length'];
      for (i=0;i<x;i++){
        const emailele = document.createElement('div');
        emailele.setAttribute("style","border: 1px solid black;border-radius:5px");
        emailele.setAttribute("id",`${emails[i].id}`);
        if (mailbox == 'inbox' || mailbox == 'archived'){
          emailele.innerHTML = (`<p><strong>${emails[i].sender}</strong></p><p>${emails[i].subject}</p><p>${emails[i].timestamp}</p>`);
        }
        if (mailbox == 'inbox' && `${emails[i].read}`){
          emailele.setAttribute("style","background-color:#cfcfcf");
        }
        if (mailbox == 'sent'){
          emailele.innerHTML = (`<p><strong>${emails[i].recipients}</strong></p><p>${emails[i].subject}</p><p>${emails[i].timestamp}</p>`);
        }
        document.querySelector('#emails-view-i').append(emailele);
      }
      console.log(emails);

      // ... do something else with emails ...
  });
}

这是我的 HTML

<div id="emails-view">
      <div id="emails-view-i"></div>
    </div>

请帮忙！

【问题讨论】：

标签： javascript html

【解决方案1】：

在这里

document.querySelector('#emails-view').innerHTML = `<h3>${mailbox.charAt(0).toUpperCase() + mailbox.slice(1)}</h3>`;

您正在设置根元素的 html。所以你正在覆盖元素，你想追加到追加，它再也找不到元素了。

所以：

document.querySelector('#emails-view-i')

为 null，您正在尝试运行 .append of null。

所以要么做这样的事情：

<div id="emails-view"></div>
<div id="emails-view-i"></div>

或例如：

  document.querySelector('#emails-view').innerHTML = document.querySelector('#emails-view').innerHTML + `<h3>${mailbox.charAt(0).toUpperCase() + mailbox.slice(1)}</h3>`;

或添加另一个 html 元素以将该标题添加到“电子邮件视图”内部，例如：

<div id="emails-view">
  <div id="emails-view-headline"></div>
  <div id="emails-view-i"></div>
</div>

然后：

document.querySelector('#emails-view-headline').innerHTML = `<h3>${mailbox.charAt(0).toUpperCase() + mailbox.slice(1)}</h3>`;

保留该元素。希望对您有所帮助。

【讨论】：

非常感谢！我尝试了最后一个建议，它奏效了！