如何保存帖子并重新运行发布函数且不删除原有输入内容

问题原因 #

你当前的代码直接复用了#mainBody内提前写好的固定用户名、帖子内容节点，每次发布直接修改这两个节点的文本内容，因此会直接覆盖上一次发布的内容，无法保留旧帖子。

解决方案 #

你需要每次发布新帖子时，动态创建全新的帖子DOM结构，再追加到#mainBody的末尾即可，修改后的代码如下：

修改后的HTML

<div id="addPost">
    <div class="title">创建新帖子
        <i class="fas fa-times" onclick="showPost()" style="color: rgb(227, 69, 41);;"></i>
    </div>
    <div class="name">
        <input type="Name__Post" placeholder="用户名" id="username__input" required>
    </div>
    <div class="post">
        <textarea placeholder="分享你的想法..." id="post__input"></textarea>
    </div>
    <div>   
        <button type="submit" onclick="Post()" id="post">发布</button>
    </div>
</div>
<!-- mainBody改为纯容器，不需要提前写帖子结构 -->
<div id="mainBody"></div>

修改后的JS

let usrInp = document.getElementById("username__input")
let pstInp = document.getElementById("post__input")
let post__body = document.getElementById("mainBody")
let postBtn = document.getElementById("post") // 改名避免和post类名冲突

function Post(){
    let pstInpStr = pstInp.value.trim()
    let usrInpStr = usrInp.value.trim()
    
    if (usrInpStr === "" || pstInpStr === ""){
        alert("输入内容不能为空")
        return false
    } 

    // 动态创建新帖子节点
    const newPost = document.createElement('div')
    // 拼接帖子结构，保留你原来的类名
    newPost.innerHTML = `
        <div class="username">
            <span>${usrInpStr}</span>
        </div>
        <div class="date"></div>
        <div class="post">
            <p>${pstInpStr}</p>
        </div>
        <hr style="border: none; border-top: 1px solid #eee; margin: 12px 0;">
    `
    // 追加到mainBody末尾
    post__body.appendChild(newPost)

    // 给mainBody加样式，只加一次
    if(!post__body.style.border){
        post__body.style.border = "1px solid lightgray"
        post__body.style.borderRadius = "10px"
        post__body.style.padding = "16px"
    }

    // 重置输入框和按钮状态
    usrInp.value = ""
    pstInp.value = ""
    postBtn.style.background = "rgb(37, 202, 31)"
    postBtn.innerHTML = "发布成功 ✔️"

    // 可选：2秒后把按钮文字恢复成默认
    setTimeout(() => {
        postBtn.style.background = ""
        postBtn.innerHTML = "发布"
    }, 2000)
}

补充说明 #

如果需要展示发布日期，可以在创建新帖子时用new Date()生成当前时间，插入到.date节点内即可。

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