为什么它给我 TypeError：无法读取未定义的属性（读取“appendChild”）

Question

尝试在提交表单后创建一个 div 元素以存储下一页的输入 必须能够为每个帖子创建一个新的 div 并渲染它们，它仅在附加到正文时才有效，我需要它在 main 中

我尝试了多次谷歌修复，并询问了一位用打字稿编码的朋友

document.addEventListener('DOMContentLoaded', function() {
    var formData = JSON.parse(localStorage.getItem('formData'));

    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);
        
        // Append the div to the body or another desired location
        document.main.appendChild(blogPostDiv); 
    } else {
        // Handle case where data is not found in localStorage
        console.log('No blog post data found.');

    }
});

Answer 1

您需要指定添加blogPostData的元素。 请尝试这个 document.getElementById("your other id").appendChild(blogPostDiv);

Answer 2

如果您正在谈论元素

<main>

，则需要从文档（DOM）中获取它，然后才能向其附加任何内容：

const mainElement = document.querySelector('main')
mainElement.appendChild(blogPostDiv); 

main

不是文档 obj

的有效（默认）属性