JavaScript使用setInterval()换行重复显示随机文本的代码修正

你当前代码无法逐行追加显示、不能反复生成文本的核心原因有3点：

• 对#text容器赋值时用innerText = 新值，属于全量替换操作，每次执行都会清空容器内原有内容，只会保留最后一次赋值的文本。
• document.write()方法如果在页面DOM加载完成后调用，会直接抹除整个页面的原有DOM结构重写内容，完全不适合动态追加内容的场景。
• 代码没有设置定时重复执行逻辑，所有随机字符串都是页面加载瞬间一次性生成的，无法实现反复生成新文本的效果。

实现思路很简单：放弃document.write，统一向#text容器追加内容；每次生成新字符串后拼接换行标签实现单行展示；用setInterval定时触发生成+追加逻辑即可。

完整可运行代码 #

<div id="text"></div>

<script>
const textContainer = document.getElementById('text');

// 随机字符串生成函数
function create_random_string(string_length){
  let random_string = '';
  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
  for (let i = 0; i < string_length; i++) {
     random_string += characters.charAt(Math.floor(Math.random() * characters.length));
  }
  return random_string; 
}

// 每1000毫秒（1秒）生成一次新字符串追加到容器，间隔数值可自行调整
setInterval(function() {
  // 用+=做内容追加，拼接<br>实现新文本单独占行
  textContainer.innerHTML += create_random_string(20) + "<br>";
}, 1000)
</script>

关键逻辑说明 #

• setInterval(执行函数, 间隔时间)：第一个参数传你要重复执行的逻辑，第二个参数传两次执行的间隔（单位为毫秒），就能实现固定周期反复生成文本的需求。如果后续需要停止定时生成，可以用clearInterval()传入setInterval返回的ID即可终止。
• 用innerHTML += 新内容替代原来的赋值操作：+=是追加写入，不会清除之前已经生成的文本，拼接的<br>标签会强制换行，保证每次新生成的字符串单独占一行。
• 移除了原有document.write相关代码，从根源避免页面DOM被意外覆盖的问题。
• 顺带修复了原函数for循环中重复声明变量i的隐性bug，避免低版本JS环境下出现变量异常。

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