Uncaught ReferenceError: header未定义，无法添加div元素至HTML文档

错误原因 #

你代码里的header变量完全没声明，浏览器找不到这个对象，直接抛出引用错误，导致后续的append/prepend操作根本没机会执行。

修复步骤 #

1. 先获取页面中的header元素
   根据你HTML里header的定义方式，用对应的选择器获取：

   • 如果HTML里是<header>标签：

     const header = document.querySelector('header');
     

   • 如果header有id（比如<header id="main-header">）：

     const header = document.getElementById('main-header');
     

   • 如果是类名（比如<header class="page-header">）：

     const header = document.querySelector('.page-header');
     

2. 确保代码在DOM加载完成后执行
   如果你的JS代码放在HTML头部，会因为DOM还没渲染完而获取不到header元素，这时候可以把代码放到DOMContentLoaded事件里，或者直接把JS脚本放在<body>标签的末尾。

   示例（用DOMContentLoaded）：

   document.addEventListener('DOMContentLoaded', function() {
     const header = document.querySelector('header');
     const message = document.createElement('div');
     message.classList.add('cookie-message');
   
     message.innerHTML =
       'We use cookies for improved functionality and analytics. <button class="btn btn--close-cookie">Got it!</button>';
   
     header.append(message);
   });
   

3. 检查HTML结构
   确认你的HTML文档里确实存在对应的header元素，避免因为拼写错误（比如写成head而非header）导致获取失败。

内容的提问来源于stack exchange，提问作者Akash A.S Gowda