如何让这段JavaScript代码作用于HTML中多个ID为frameText的标签

首先明确HTML的基础规则：同一个页面中id属性值必须全局唯一，如果你给多个标签设置了相同的id，document.getElementById()只会匹配到第一个符合条件的元素，剩下的元素不会被选中，这就是你原来的代码只能给一个标签赋值的原因。
你猜测的用循环实现批量赋值的思路是完全正确的，具体实现步骤如下：

1. 调整HTML标签属性 #

把所有需要显示目标文本的标签，统一加上相同的class属性（class是专门给同类元素做分组用的，允许重复使用），比如都设置class="frameText"：

<!-- 把原来重复写的id="frameText"全部替换成class属性 -->
<p class="frameText"></p>
<div class="frameText"></div>
<h3 class="frameText"></h3>

2. 修改JS赋值逻辑 #

你之前写的生成重复字符串的逻辑不需要改动，只需要把最后单元素赋值的代码，替换成批量选中元素+循环赋值的逻辑即可，完整代码如下：

let multi = 2;
let str = "Little lamb";
let multiStr = "";

while(multi > 0){
  multiStr += str
  multiStr += " ";
  multi--;
}

multiStr = multiStr.trimEnd();
console.log(multiStr); // 输出 "Little lamb Little lamb"

// 选中所有带frameText类名的标签，得到一个元素集合
const targetElements = document.querySelectorAll(".frameText");
// 遍历集合里的每一个标签，统一设置内容
for(let i = 0; i < targetElements.length; i++){
  targetElements[i].textContent = multiStr;
}

注：如果只是设置纯文本内容，用textContent比innerHTML更安全，性能也更好；如果要插入HTML内容再用innerHTML即可。

不推荐的兼容写法（违反HTML规范） #

如果你暂时不想修改HTML里重复的id属性，也可以通过属性选择器强行选中所有id为frameText的元素，但这种写法不符合HTML规范，很容易在后续开发中引发其他问题，仅做了解：

// 不符合规范，非必要不要用
const targetElements = document.querySelectorAll('[id="frameText"]');
for(let i = 0; i < targetElements.length; i++){
  targetElements[i].textContent = multiStr;
}

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