jQuery append()方法无法追加内容反而替换旧内容的问题排查

你的代码无法实现内容追加，核心是几处逻辑和写法错误：

• 每次执行提交逻辑时先调用了demo.html("")，这个方法会直接清空#demo容器内所有已存在的内容，后续append的内容自然只会保留最新提交的1条，历史内容全部被提前清除
• 写了无意义的for循环：name是jQuery获取的单个输入框对象，name.length固定为1，这个循环除了重复执行清空+写入操作外没有任何作用
• 代码缺失提交按钮的点击事件绑定，实际运行时点击按钮不会触发提交逻辑；另外姓名输入框写了无效的type="name"属性，不符合HTML规范，评论容器用<p>标签嵌套块级元素<h4>也属于不规范写法
• 重复引入了2次jQuery资源，属于不必要的资源加载

<!-- 引入资源，删除重复的jQuery引入 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container m-5">
    <div class="row">
        <div class="col-md-6 justify-content-center">
            <span>Full Name :</span>
            <input id="name" type="text" class="d-flex mb-3">
            <span>Email :</span>
            <input id="email" type="email" name="email" class="d-flex mb-3">
            <span>Comment :</span>
            <input id="comment" type="text" class="d-flex mb-3">
            <button id="btn" class="mt-3">Submit</button>
        </div>
        <div class="col-md-6">
            <!-- 把p标签换成div，符合块级元素嵌套规范 -->
            <div id="demo"></div>
        </div>
    </div>
</div>

<script>
// 绑定提交按钮点击事件
$("#btn").on("click", function() {
    const nameInput = $("#name");
    const commentInput = $("#comment");
    // 非空校验
    if (!nameInput.val().trim() || !commentInput.val().trim()) {
        alert("姓名和评论内容不能为空");
        return;
    }
    // 过滤敏感词
    const filteredComment = censor(commentInput);
    // 直接追加内容，不要提前清空容器
    $("#demo").append(`
        <div class="mb-3">
            <h4>${nameInput.val()} :</h4>
            <p>${filteredComment}</p>
            <hr>
        </div>
    `);
    // 提交后清空输入框
    nameInput.val("");
    commentInput.val("");
});

function censor(comment) {
    const splitString = comment.val().split(" ");
    for (let b = 0; b < splitString.length; b++) {
        // 不区分大小写匹配敏感词
        const currentWord = splitString[b].toLowerCase();
        if (currentWord === "duck" || currentWord === "swan") {
            splitString[b] = '****';
        }
    }
    return splitString.join(" ");
}
</script>

• 移除了提交前清空容器的demo.html("")逻辑，保留所有历史评论内容
• 删除无意义的for循环，简化逻辑
• 补全按钮点击事件绑定，修复点击按钮无响应的问题
• 修正输入框type属性、评论容器标签的不规范写法
• 增加基础的输入校验、提交后清空输入框的交互优化，敏感词匹配支持不区分大小写识别

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