JavaScript中正确追加DOM元素的方法？天气项目DOM操作异常求助

云原生阿岚

2026-8-2

问题解答：重复使用DOM元素引用导致append()结果不符合预期

你的推测完全正确——问题就出在重复传入同一个DOM元素引用上。

DOM元素是内存中的唯一实体，一个元素对象不能同时出现在DOM树的两个位置。当你多次把同一个span传给append()时，它并不会自动创建副本，而是会把这个元素从之前的位置（如果有的话）移动到最后一次指定的位置。这就是为什么你最终只看到一个span，而且在"Max Temp"后面。

正确的解决方法有两种：

1. 创建两个独立的span元素

直接生成两个不同的span对象，分别设置样式和内容：

const div = document.createElement('div');

// 第一个温度对应的span
const minTempSpan = document.createElement('span');
minTempSpan.className = 'small-font';
minTempSpan.textContent = ' °C ';

// 第二个温度对应的span
const maxTempSpan = document.createElement('span');
maxTempSpan.className = 'small-font';
maxTempSpan.textContent = ' °C ';

div.append("Min Temp", minTempSpan, "Max Temp", maxTempSpan);

2. 克隆已有的span元素

如果不想重复写创建span的代码，可以用cloneNode(true)克隆一个完全相同的副本（true表示深克隆，会复制元素的属性和子内容）：

const div = document.createElement('div');
const span = document.createElement('span');
span.className = 'small-font';
span.textContent = ' °C ';

// 克隆span副本
const spanClone = span.cloneNode(true);

div.append("Min Temp", span, "Max Temp", spanClone);