如何根据指定数值大小替换切换两个不同的div卡片设计？

方案1：控制元素显隐实现切换（最推荐） #

这种方案不需要修改DOM结构，仅通过控制CSS的display属性实现切换，性能更高，逻辑也更简单，适合需要频繁切换卡片的场景。

完整实现代码 #

CSS（可选，用于初始化隐藏不需要的元素）

/* 初始默认两个div都隐藏，也可以根据需求设置默认显示的元素 */
#div1, #div2 {
  display: none;
}

HTML 不需要修改，沿用你现有代码即可

JS 代码

// 提前获取两个DOM元素，避免重复查询
const div1 = document.getElementById('div1');
const div2 = document.getElementById('div2');

// 数值判断逻辑
const value = data[i].value;
if (value > 20) {
  // 大于20时显示div2，隐藏div1
  div1.style.display = 'none';
  div2.style.display = 'block';
} else if (value < 20) {
  // 小于20时显示div1，隐藏div2
  div1.style.display = 'block';
  div2.style.display = 'none';
}
// 如果需要处理等于20的情况，可以自行补充else分支

方案2：DOM节点替换实现（满足替换整个div的需求） #

如果你确实需要完全替换DOM节点而非控制显隐，可以使用replaceChild方法，注意要提前备份节点，避免替换后找不到原始节点无法切换回来。

实现代码 #

// 获取两个div的父容器，如果你把div放在其他父容器里要替换成对应的父元素选择器
const container = document.body;
const div1 = document.getElementById('div1');
const div2 = document.getElementById('div2');
// 深度克隆两个节点，用于切换时恢复原始结构
const div1Clone = div1.cloneNode(true);
const div2Clone = div2.cloneNode(true);

const value = data[i].value;
// 获取当前页面上存在的目标div
const currentActiveDiv = document.querySelector('#div1, #div2');
if (value > 20) {
  // 替换为div2
  container.replaceChild(div2Clone, currentActiveDiv);
} else if (value < 20) {
  // 替换为div1
  container.replaceChild(div1Clone, currentActiveDiv);
}

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