如何在for循环中操作p元素的textContent并实现预期效果？

我尝试在for循环中为p元素设置textContent，代码如下：

const ls = [1, 2, 3, 4, 5, 6]
const p = document.createElement('p')
p.classList.add('text-body-secondary')
for (let i = 0; i > ls.length; i++) {
  p.textContent += 'abc'
  // p.textContent = 'abc'   // Does not work either.
  if (i !== ls.length - 1) {
    p.textContent += ', '
  }
}
console.log(p)

预期结果为：

<p class="text-body-secondary">abc, abc, abc, abc, abc, abc</p>

但实际并未生效。我已尝试以下操作：

• 将const改为let
• 使用p.textContent = 'abc'
• 因需要使用索引，未使用forEach或map

请问是否不允许在for循环中操作p.textContent？该如何实现预期效果？

问题根源 #

不是不能在循环中操作textContent，而是你的for循环条件写错了：i > ls.length这个条件从一开始就不成立（初始i为0，ls.length是6，0>6结果为false），导致循环体完全没有执行，所以p元素的textContent始终为空。

修复方案 #

把循环条件改为i < ls.length，这样循环会从i=0执行到i=5，正好遍历数组的6个元素：

const ls = [1, 2, 3, 4, 5, 6]
const p = document.createElement('p')
p.classList.add('text-body-secondary')
// 修正循环条件
for (let i = 0; i < ls.length; i++) {
  p.textContent += 'abc'
  if (i !== ls.length - 1) {
    p.textContent += ', '
  }
}
console.log(p)

可选优化方案 #

如果只是要生成重复的abc并以逗号分隔，也可以先通过数组生成目标字符串，再一次性赋值给textContent，避免多次操作DOM属性（性能更优，尤其数组长度较大时）：

const ls = [1, 2, 3, 4, 5, 6]
const p = document.createElement('p')
p.classList.add('text-body-secondary')
// 生成由6个'abc'组成的数组，再用逗号连接
p.textContent = Array.from({length: ls.length}, () => 'abc').join(', ')
console.log(p)

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