《Eloquent JavaScript》第二章循环三角形练习：JS循环元素莫名消失

嘿，我之前做这个练习的时候也踩过类似的坑！咱们先搞清楚问题出在哪，再给你几个靠谱的解决方案。

问题根源猜测 #

你提到循环里创建的标签会被莫名移除，大概率是因为重复使用了同一个DOM元素。比如如果你把<br>元素的创建放在了循环外面，每次调用appendChild(carriage)的时候，DOM规则会把这个元素从原来的位置移动到新位置——而不是复制它。结果就是前面的换行都被“挪”到了最后，看起来就像被移除了。

举个错误示例（你可能写了类似的代码）：

const triangle = document.getElementById('triangle');
const carriage = document.createElement('br'); // 错误：把br创建放在循环外！
let hashStr = '';

for (let i = 1; i <= 7; i++) {
  hashStr += '#';
  triangle.appendChild(document.createTextNode(hashStr));
  triangle.appendChild(carriage); // 每次都是同一个br，会被移动
}

解决方案1：每次循环创建新的换行元素 #

把<br>的创建放到循环内部，每次生成一个新的换行元素，这样就不会出现“移动”的问题了：

const triangle = document.getElementById('triangle');
let hashStr = '';

for (let i = 1; i <= 7; i++) {
  hashStr += '#';
  // 创建文本节点添加#字符串
  triangle.appendChild(document.createTextNode(hashStr));
  // 每次都创建新的br元素
  triangle.appendChild(document.createElement('br'));
}

解决方案2：构建完整字符串后一次性插入（更高效） #

频繁操作DOM会影响性能，更优雅的方式是先把整个三角形的字符串构建好，再一次性设置到div里。记得用\n换行，然后给div加CSS让换行生效：

JavaScript代码 #

const triangle = document.getElementById('triangle');
let triangleStr = '';

for (let i = 1; i <= 7; i++) {
  triangleStr += '#'.repeat(i) + '\n';
}

triangle.textContent = triangleStr;

CSS样式 #

#triangle {
  white-space: pre-wrap; /* 让文本里的\n生效，自动换行 */
}

解决方案3：用innerHTML直接拼接（简单粗暴） #

如果不介意innerHTML的安全风险（这里只是静态内容，完全没问题），可以直接拼接HTML字符串：

const triangle = document.getElementById('triangle');
let triangleHtml = '';

for (let i = 1; i <= 7; i++) {
  triangleHtml += '#'.repeat(i) + '<br>';
}

triangle.innerHTML = triangleHtml;

这样就能完美把三角形输出到指定的div里啦，不会再出现元素莫名消失的问题~

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