JS循环中.append()仅保留最后一次迭代结果，如何实现真正追加？

兄弟，我太懂你这种循环赋值结果总是被覆盖的憋屈了！大概率是你在循环里直接把textarea的value设成了当前迭代的内容，而不是把新内容追加到已有内容后面。咱们一步步来解决：

先看最常见的错误写法 #

你可能写了类似这样的代码：

const items = ['第一行', '第二行', '第三行'];
const textarea = document.getElementById('myTextarea');

// ❌ 错误：每次赋值都会覆盖之前的内容
items.forEach(item => {
  textarea.value = item;
});

运行后textarea里只会显示最后一个元素“第三行”，因为每次循环都把value完全替换成了当前item。

正确的追加写法 #

核心思路是把新内容和textarea原有的value拼接起来，而不是直接替换。

1. 同步循环中直接追加 #

适合数组或对象的同步遍历：

const items = ['第一行', '第二行', '第三行'];
const textarea = document.getElementById('myTextarea');

// ✅ 正确：追加内容，保留之前的结果
items.forEach(item => {
  // 加换行符让每行内容分开，更易读
  textarea.value += item + '\n';
});

如果是遍历对象：

const userInfo = { 姓名: '张三', 年龄: 30, 职业: '前端开发' };
const textarea = document.getElementById('myTextarea');

for (const key in userInfo) {
  if (userInfo.hasOwnProperty(key)) {
    textarea.value += `${key}: ${userInfo[key]}\n`;
  }
}

2. 先拼接成完整字符串再赋值（性能更优） #

如果你的数组/对象很大，多次修改textarea的value会触发多次DOM重绘，推荐先把所有内容拼接成一个字符串，再一次性赋值：

const items = ['第一行', '第二行', '第三行'];
const textarea = document.getElementById('myTextarea');

// 先把数组元素用换行符拼接成完整字符串
const fullContent = items.join('\n');
// 直接赋值（如果要追加到原有内容后面，就用textarea.value += '\n' + fullContent）
textarea.value = fullContent;

如果你是异步循环场景（比如含setTimeout/AJAX） #

如果你之前试的闭包解决方案没用，可能是没抓对变量。比如下面的错误异步写法：

const items = ['第一行', '第二行', '第三行'];
const textarea = document.getElementById('myTextarea');

// ❌ 异步循环会导致所有回调都用最后一个item
items.forEach(item => {
  setTimeout(() => {
    textarea.value += item + '\n';
  }, 100);
});

这时候可以用let在循环块里捕获变量，或者用forEach的回调参数：

// ✅ 用let捕获当前迭代的item
items.forEach(item => {
  let currentItem = item;
  setTimeout(() => {
    textarea.value += currentItem + '\n';
  }, 100);
});

// 或者直接用forEach的回调参数（更简洁）
items.forEach((item) => {
  setTimeout(() => {
    textarea.value += item + '\n';
  }, 100);
});

不过看你的描述，大概率是同步循环的赋值方式问题，先试试前面的基础写法应该就能解决！

内容的提问来源于stack exchange，提问作者Aus-tn