如何不使用innerHTML优化颜色列表元素的添加逻辑？

问题背景 #

现有代码通过innerHTML批量生成颜色列表项，但每次调用都会清空整个列表重新渲染，且难以单独管理每个列表元素；尝试insertAdjacentHTML后，需要额外处理元素的保存与移除逻辑，同时要结合localStorage实现持久化。

优化思路：原生DOM元素创建+状态管理 #

直接使用document.createElement创建每个DOM节点，既能直接引用每个元素方便后续单独操作，也能配合localStorage维护颜色数组的持久化状态。

方案1：全量渲染（替换旧列表） #

如果每次调用ShowColors都需要根据最新的savedColorsArray重新渲染整个列表，可先清空旧列表，再逐个创建元素添加：

const colorList = document.querySelector(".all-colors");

function ShowColors() {
    // 清空现有列表
    colorList.innerHTML = '';
    savedColorsArray.forEach(color => {
        // 创建li元素
        const li = document.createElement('li');
        li.classList.add('color');
        
        // 创建span色块元素
        const span = document.createElement('span');
        span.classList.add('rect');
        span.dataset.color = color;
        span.style.background = color;
        
        // 组装节点并添加到列表
        li.appendChild(span);
        colorList.appendChild(li);
    });
}

方案2：增量更新（单独添加/移除元素） #

如果不需要每次全量渲染，而是支持单独添加或移除颜色，可以拆分出独立的增删函数，同时同步维护数组与localStorage：

const colorList = document.querySelector(".all-colors");
// 从localStorage初始化颜色数组，无数据则为空数组
let savedColorsArray = JSON.parse(localStorage.getItem('savedColors')) || [];

// 页面加载时初始化渲染
ShowColors();

// 全量渲染函数
function ShowColors() {
    colorList.innerHTML = '';
    savedColorsArray.forEach(addColorToList);
}

// 单独添加单个颜色到列表的工具函数
function addColorToList(color) {
    const li = document.createElement('li');
    li.classList.add('color');
    li.dataset.color = color; // 给li标记颜色，方便后续查找移除
    
    const span = document.createElement('span');
    span.classList.add('rect');
    span.dataset.color = color;
    span.style.background = color;
    
    li.appendChild(span);
    colorList.appendChild(li);
}

// 公共添加方法：同步数组、localStorage和DOM
function addColor(color) {
    if (!savedColorsArray.includes(color)) {
        savedColorsArray.push(color);
        localStorage.setItem('savedColors', JSON.stringify(savedColorsArray));
        addColorToList(color);
    }
}

// 公共移除方法：同步数组、localStorage和DOM
function removeColor(color) {
    savedColorsArray = savedColorsArray.filter(c => c !== color);
    localStorage.setItem('savedColors', JSON.stringify(savedColorsArray));
    // 找到对应li元素并移除
    const targetLi = colorList.querySelector(`[data-color="${color}"]`);
    if (targetLi) targetLi.remove();
}

优势说明 #

• 避免innerHTML/insertAdjacentHTML潜在的XSS风险（若颜色值来自用户输入）
• 可直接引用每个DOM元素，方便后续单独操作（如移除、修改样式）
• 状态同步逻辑清晰，增删操作直接关联数组与持久化存储

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