如何通过for循环与innerHTML完整展示数组（替代document.write）？

嘿，这个问题我之前也碰到过！核心原因其实是你每次循环的时候都直接覆盖了目标元素的内容，而不是把新的项追加进去——这就导致最后只有最后一次循环的内容留在元素里。而document.write()是直接往文档流里持续写入内容，所以能完整展示所有项。下面给你几个实用的解决技巧：

1. 用innerHTML +=追加内容（简单直接） #

这种方式是把新的数组项拼接到目标元素的现有内容后面，而不是直接替换：

const fruits = ['苹果', '香蕉', '橙子', '草莓'];
const targetDiv = document.getElementById('fruitList');

for (let fruit of fruits) {
  // 用+=而不是=，把新内容追加到已有内容之后
  targetDiv.innerHTML += `<p>${fruit}</p>`;
}

⚠️ 注意：如果数组内容包含用户输入的未知内容，这种方式有XSS安全风险，更推荐下面的方法。

2. 创建DOM元素逐个追加（更安全） #

通过创建独立的DOM节点再追加到目标元素中，完全避免innerHTML的安全问题：

const fruits = ['苹果', '香蕉', '橙子', '草莓'];
const targetDiv = document.getElementById('fruitList');

fruits.forEach(fruit => {
  // 创建新的元素节点
  const itemEl = document.createElement('li');
  // 用textContent设置内容，自动转义特殊字符
  itemEl.textContent = fruit;
  // 追加到目标元素里
  targetDiv.appendChild(itemEl);
});

3. 先拼接完整内容再一次性赋值（性能更优） #

如果数组项很多，频繁操作DOM会影响性能，可以先把所有内容拼成一个字符串，再一次性设置给目标元素：

const fruits = ['苹果', '香蕉', '橙子', '草莓'];
const targetDiv = document.getElementById('fruitList');
let fullContent = '';

for (let fruit of fruits) {
  fullContent += `<div class="fruit-item">${fruit}</div>`;
}
// 一次性赋值，减少DOM操作次数
targetDiv.innerHTML = fullContent;

顺便提一句：document.write()之所以能正常显示，是因为它在页面加载过程中直接向文档流写入内容，每一次调用都是往末尾追加，不会覆盖之前的内容。但它的局限性很大——页面加载完成后调用会清空整个文档，所以日常开发中更推荐用上面的DOM操作方法，灵活性和安全性都更高。

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