JavaScript appendChild追加DOM无法覆盖旧数据问题排查

• HTML全局id属性要求唯一，当前代码在randQua、randNam两个父容器下都使用了id="selection"作为内容容器的标识，违反了id唯一性规则
• document.getElementById("selection")只会返回DOM中第一个匹配该id的元素，也就是randQua下的内容块：
  • randQua函数执行时能正常找到自己的旧内容删除
  • randNam函数执行时，查找到的永远是randQua下的selection元素，根本找不到自己容器下的旧内容，自然无法删除，导致旧名称内容反复堆叠
• 额外逻辑问题：函数声明带了selection形参，但函数内部又重新声明了同名变量获取DOM，形参传值完全没生效，按钮上绑定的onclick="randGen(selection.value)"属于无效传参

第一步：修正HTML重复ID问题 #

把两个父容器下的内容容器改成唯一id，修正后核心HTML结构如下：

<input type="button" id="submit" onclick="randGen();" name="GenerateOutput" value="Generate Output"> 
</form>
<div class="genSection" id="genSection">
    <div id="randQua">
        <!-- 给品质内容容器设置唯一id -->
        <div id="quaContent"></div>
    </div>
    <div id="randNam">
        <!-- 给名称内容容器设置唯一id -->
        <div id="namContent"></div>
    </div>
</div>

注：按钮上的onclick不需要传参，因为函数内部会自行读取选择框的值，删掉无效传参避免报错。

第二步：修正JS逻辑 #

两个生成函数分别操作对应专属的内容容器，删除旧内容时直接定位到对应容器即可，修正后JS代码如下：

function randGen(){
    randQua();
    randNam();
}

function randNam(){
    // 读取品质选择框的值
    const selection = document.getElementById('quality');
    // 找到名称模块的专属内容容器
    const namContainer = document.getElementById('randNam');
    // 先删除旧的名称内容
    const oldNamContent = document.getElementById('namContent');
    if(oldNamContent) namContainer.removeChild(oldNamContent);

    // 创建新的内容块
    const newContent = document.createElement("div");
    newContent.id = "namContent";
    // 生成随机名称逻辑
    let rnd, innNa;
    if(selection.value == 1){
        rnd = Math.floor(Math.random() * innNa1.length);
        innNa = innNa1[rnd];
    }else{
        rnd = Math.floor(Math.random() * innNa2.length);
        innNa = innNa2[rnd];
    }
    newContent.appendChild(document.createTextNode(innNa));
    newContent.appendChild(document.createElement('br'));
    // 追加新内容
    namContainer.appendChild(newContent);
}

function randQua(){
    // 读取品质选择框的值
    const selection = document.getElementById('quality');
    // 找到品质模块的专属内容容器
    const quaContainer = document.getElementById('randQua');
    // 先删除旧的品质内容
    const oldQuaContent = document.getElementById('quaContent');
    if(oldQuaContent) quaContainer.removeChild(oldQuaContent);

    // 创建新的内容块
    const newContent = document.createElement("div");
    newContent.id = "quaContent";
    // 生成随机品质逻辑
    let rnd, innQu;
    if(selection.value == 1){
        rnd = Math.floor(Math.random() * innQu1.length);
        innQu = innQu1[rnd];
    }else{
        rnd = Math.floor(Math.random() * innQu2.length);
        innQu = innQu2[rnd];
    }
    newContent.appendChild(document.createTextNode(innQu));
    newContent.appendChild(document.createElement('br'));
    // 追加新内容
    quaContainer.appendChild(newContent);
}

修复后每次点击按钮，两个模块都会先删掉旧的生成结果，再写入新的随机内容，实现覆盖效果。

如果需要保留所有历史生成记录、不覆盖旧内容，只需要调整内容插入逻辑即可：

• 正序排列（最早生成的内容在最上方，最新生成的内容在最下方）：直接使用父容器的appendChild(新元素)方法即可，该方法会把新元素插到父容器的所有子元素末尾，自然按生成时间从早到晚排列
• 如果之前出现逆序问题，是因为使用了prepend(新元素)方法把新内容插到了父容器最开头，替换成appendChild就能恢复正序
• 如果需要保留历史，把上述修复代码里删除旧内容的逻辑注释掉即可

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