如何避免表单插入对象值后在HTML中重复渲染？

错误原因 #

你每次点击提交按钮时，都会通过recipes.forEach遍历整个数组，为数组里的每一条数据重新创建DOM元素并添加到容器中。比如第一次添加1条数据，容器里新增1个元素；第二次添加后数组有2条数据，遍历会执行2次，这就会把第一条数据对应的元素再重复添加一遍，最终导致内容反复插入。

修复后的代码 #

let recipes = [];
const addRecipe = e => {
    e.preventDefault();
    const recipeTitleInput = document.getElementById('recipe-title');
    let recipe = {
        title: recipeTitleInput.value
    };
    recipes.push(recipe);
    document.querySelector('form').reset();
    
    // 只渲染刚新增的这条数据
    const recipeContainer = document.querySelector('.recipes-container');
    const recipeTitle = document.createElement('div');
    recipeTitle.classList.add('recipe-title');
    recipeTitle.textContent = recipe.title;
    recipeContainer.append(recipeTitle);
    
    console.log(recipes);
};

document.getElementById('send-recipe-btn').addEventListener('click', addRecipe);

关键修改点 #

• 移除了遍历整个数组的forEach循环，改为直接处理刚创建的recipe对象，只新增当前提交的内容对应的DOM元素
• 提前获取输入框元素，避免重复查询DOM（可选优化）

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