循环内无法复用全局document.createElement('br')元素的原因咨询

问题现象 #

尝试复用提前创建好的<br>元素在循环中添加换行时失败，具体表现：

• 示例0：循环内每次调用document.createElement('br')，每行正常换行
• 示例1：循环内每次创建新变量存储<br>元素，每行正常换行
• 示例2：用全局变量存储单个<br>元素循环复用，最终无换行，内容挤在一起显示为a: 1b: 2c: 3

相关代码 #

JavaScript代码

const obj = { a: 1, b: 2, c: 3 };

/* 正常工作 */
const div0 = document.getElementsByTagName('div')[0];
Object.keys(obj).forEach(key => div0.append(`${key}: ${obj[key]}`, document.createElement('br')))


/* 正常工作 */
const div1 = document.getElementsByTagName('div')[1];
Object.keys(obj).forEach(key => {
    const br1 = document.createElement('br');
    div1.append(`${key}: ${obj[key]}`, br1);
    console.log(`${typeof(br1)}, ${br1}`, br1); // 验证每次循环的br1和br2结果一致
})

/* 不工作 */
const div2 = document.getElementsByTagName('div')[2];
const br2 = document.createElement('br');
Object.keys(obj).forEach(key => {
    div2.append(`${key}: ${obj[key]}`, br2);
    console.log(`${typeof(br2)}, ${br2}`, br2); // 验证br2每次循环结果和br1一致
})

HTML代码

<div>Example 0: br 正常工作 - 每次循环调用createElement<br></div><br>
<div>Example 1: br 正常工作 - 每次循环创建新变量存储元素<br></div><br>
<div>Example 2: br 不工作 - 用全局变量存储单个元素<br></div>

原因解析 #

核心在于DOM元素是唯一的节点对象，它在DOM树中只能存在一个位置：

1. 当你调用append()添加一个已经存在于DOM中的元素时，浏览器不会复制这个元素，而是把它从当前所在的位置移动到新的位置。
2. 示例2中，第一次循环把br2加到div2末尾；第二次循环append时，br2已经在div2里了，浏览器会把它从之前的位置移到当前新内容的后面；第三次循环同理。最终br2只会出现在整个内容的最后，中间的内容自然没有换行。

而示例0和1每次循环都创建了新的<br>元素，每个元素都是独立的DOM节点，所以能被添加到DOM树的不同位置，实现每行换行的效果。

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