如何将JavaScript循环结果输出到指定ID的HTML元素中？

原代码存在的问题 #

• 循环结束后变量b等于数组长度，myLibrary[b]为undefined，函数返回值无效，且未将数组内容处理成可展示的格式
• 仅对变量labels赋值，未实际修改DOM元素的innerHTML属性
• HTML中的<script>标签被注释，导致JS代码未执行

修复后的代码 #

JavaScript部分

const myLibrary = ["Thief", "The Lion", "Harry Potter", "Lord of the Rings"];

function addBookToLibrary() {
  // 若要显示为换行的列表项
  return myLibrary.join('<br>');
  // 若要显示成原始数组格式，替换为：return JSON.stringify(myLibrary);
}

// 直接修改DOM元素内容
document.getElementById("myBooks").innerHTML = addBookToLibrary();

HTML部分

<p>My list should be below</p>
<p id="myBooks"></p>

<script src="script.js"></script>

关键修改说明 #

1. 重构addBookToLibrary函数，直接返回处理后的数组内容：用join('<br>')将数组元素转为换行分隔的字符串，或用JSON.stringify()输出原始数组格式
2. 跳过中间变量，直接获取DOM元素并设置其innerHTML
3. 取消<script>标签的注释，确保JS代码能正常加载执行

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