为何JavaScript动态创建的div无法被其他JS函数访问并返回null

问题根因 #

setAttribute() 方法执行后的返回值为undefined，你代码中直接将创建div的操作和设置属性的操作链式调用后赋值给emaildetails变量，最终变量存储的值是undefined而非DOM元素。后续执行document.body.append(emaildetails)时实际没有将目标div插入到页面DOM树中，因此load_mailbox函数查询#email-details元素时返回null，触发样式赋值报错。

修复方案 #

将创建元素、设置属性、插入DOM的逻辑拆分编写即可：

document.addEventListener('DOMContentLoaded', function() {
  // 拆分三步操作，避免链式调用导致的返回值错误
  const emaildetails = document.createElement('div');
  emaildetails.setAttribute('id','email-details');
  document.body.append(emaildetails);

  // 剩余原有逻辑保持不变
  document.querySelector('#inbox').addEventListener('click', () => load_mailbox('inbox'));
  document.querySelector('#sent').addEventListener('click', () => load_mailbox('sent'));
  document.querySelector('#archived').addEventListener('click', () => load_mailbox('archive'));
  document.querySelector('#compose').addEventListener('click', compose_email);
  document.querySelector('#compose-form').onsubmit = sendmail;
  load_mailbox('inbox');
});

补充说明 #

如果想保留链式写法，可以使用元素的id属性直接赋值，该属性赋值后会返回元素本身，支持链式调用：

const emaildetails = document.createElement('div');
emaildetails.id = 'email-details';

拆分写法可读性更高，更易维护，更推荐使用。

内容的提问来源于stack exchange，提问作者lony235