向main元素添加div时触发TypeError: Cannot read properties of undefined错误求助

问题原因 #

你遇到的TypeError: Cannot read properties of undefined (reading 'appendChild')，核心原因是**document.main不是合法的DOM元素获取方式**。document对象本身没有名为main的直接属性，调用它会返回undefined，自然无法执行appendChild方法。

解决方案 #

替换错误的元素获取代码，使用标准的DOM选择器方法获取main元素，同时增加元素存在性判断避免后续报错：

修改后的完整代码 #

document.addEventListener('DOMContentLoaded', function() {
    var formData = JSON.parse(localStorage.getItem('formData'));
    // 用选择器获取页面中的main元素
    var mainElement = document.querySelector('main');

    // 先判断main元素是否存在
    if (!mainElement) {
        console.log('页面中未找到main元素');
        return;
    }

    if (formData) {
        var blogPostDiv = document.createElement('div');
        blogPostDiv.classList.add('blog-post');

        var usernamePara = document.createElement('p');
        usernamePara.textContent = 'Author: ' + formData.username;

        var titlePara = document.createElement('h2');
        titlePara.textContent = formData.title;

        var contentPara = document.createElement('p');
        contentPara.textContent = formData.content;

        blogPostDiv.appendChild(usernamePara);
        blogPostDiv.appendChild(titlePara);
        blogPostDiv.appendChild(contentPara);
        
        // 追加到main元素
        mainElement.appendChild(blogPostDiv); 
    } else {
        console.log('No blog post data found.');
    }
});

可选优化（针对多帖子需求） #

当前代码仅能渲染单条帖子，若要支持生成多个div存储所有提交的帖子，需要调整localStorage的存储逻辑：

1. 表单提交页：将新帖子数据添加到数组中，再存入localStorage

   // 表单提交时的代码示例
   function handleSubmit(e) {
       e.preventDefault();
       // 获取表单数据
       const newPost = {
           username: document.getElementById('username').value,
           title: document.getElementById('title').value,
           content: document.getElementById('content').value
       };
       // 从localStorage获取已有帖子数组，没有则初始化空数组
       const posts = JSON.parse(localStorage.getItem('blogPosts')) || [];
       posts.push(newPost);
       localStorage.setItem('blogPosts', JSON.stringify(posts));
       // 跳转到展示页
       window.location.href = '展示页路径';
   }
   

2. 展示页：遍历数组生成多个帖子div

   document.addEventListener('DOMContentLoaded', function() {
       const posts = JSON.parse(localStorage.getItem('blogPosts')) || [];
       const mainElement = document.querySelector('main');
   
       if (!mainElement) {
           console.log('页面中未找到main元素');
           return;
       }
   
       if (posts.length === 0) {
           console.log('No blog post data found.');
           return;
       }
   
       // 遍历所有帖子生成div
       posts.forEach(post => {
           const blogPostDiv = document.createElement('div');
           blogPostDiv.classList.add('blog-post');
   
           const usernamePara = document.createElement('p');
           usernamePara.textContent = 'Author: ' + post.username;
   
           const titlePara = document.createElement('h2');
           titlePara.textContent = post.title;
   
           const contentPara = document.createElement('p');
           contentPara.textContent = post.content;
   
           blogPostDiv.appendChild(usernamePara);
           blogPostDiv.appendChild(titlePara);
           blogPostDiv.appendChild(contentPara);
           mainElement.appendChild(blogPostDiv);
       });
   });
   

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