JS循环在<p>标签内重复赋值仅显最后一行，如何解决？

问题原因 #

你在循环中每次使用tableRow.innerHTML = ...，这会完全覆盖标签内之前的内容，所以循环执行12次后，只会保留最后一次的赋值结果。

解决方案 #

方法1：累加innerHTML内容

使用+=运算符在现有内容后追加新行，每次循环都会把新的乘法项加到已有内容末尾：

let userNumber = 2;
let tableRow = document.getElementById("table-goes-here");

// 用let声明counter，避免全局变量污染
for(let counter = 1; counter <= 12; counter++) {
    tableRow.innerHTML += `${counter} x ${userNumber} = ${counter * userNumber}<br>`;
}

这里用模板字符串（${}）简化了字符串拼接，和原写法功能一致。

方法2：先拼接字符串再一次性赋值（推荐）

频繁修改innerHTML会重复触发DOM渲染，性能较低。更优的方式是先把所有内容拼接成一个字符串，再一次性赋值：

let userNumber = 2;
let tableRow = document.getElementById("table-goes-here");
let tableContent = "";

for(let counter = 1; counter <= 12; counter++) {
    tableContent += `${counter} x ${userNumber} = ${counter * userNumber}<br>`;
}

tableRow.innerHTML = tableContent;

关于\n无效的说明

HTML中普通文本的换行符\n不会被渲染成换行，只会被当作空格。如果想用\n实现换行，可以把<p>标签换成<pre>（预格式化标签，会保留文本中的换行和空格），同时使用textContent赋值：

修改HTML：

<pre id="table-goes-here">Goes here</pre>

对应的JS：

let userNumber = 2;
let tableRow = document.getElementById("table-goes-here");
let tableContent = "";

for(let counter = 1; counter <= 12; counter++) {
    tableContent += `${counter} x ${userNumber} = ${counter * userNumber}\n`;
}

tableRow.textContent = tableContent;

内容的提问来源于stack exchange，提问作者Shahzad S.