HTML与JS联动故障：无法用数组替换页面标题文本

你的问题核心是JS执行时机不对——你把<script>放在了<head>里，这时候浏览器还没渲染<body>里的<h1>元素，document.getElementById("h1")会返回null，自然没法修改它的内容。两种写法本身没问题，只是没找到目标元素而已。

解决方法有三种： #

1. 把脚本移到<body>末尾（最简单）

修改index.html，把<script>标签放到<h1>后面，确保DOM先加载完成再执行JS：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1 id="h1">Heading 1</h1>
    <script src="./new.js"></script>
</body>
</html>

2. 用DOMContentLoaded事件包裹代码（更稳妥）

如果不想移动脚本位置，就在new.js里把修改DOM的代码放到DOMContentLoaded事件回调里，确保DOM加载完成后再执行：

let fruits=["apple","orange","mango"];
fruits.push("kiwi", "grape")
console.log(fruits);
let f1= fruits.indexOf("kiwi");
console.log(f1);

document.addEventListener('DOMContentLoaded', function() {
    document.getElementById("h1").innerHTML= fruits.join(", ");
});

3. 给<script>加defer属性

在index.html的<script>标签上添加defer，让脚本在DOM解析完成后再执行，同时不阻塞页面渲染：

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

补充说明： #

• 你直接写document.getElementById("h1").innerHTML=fruits;也能生效（找到元素的前提下），因为数组转字符串默认就是用逗号分隔，和join(", ")效果一样，但join可以自定义分隔符（比如join(" | ")），更灵活。
• 可以打开浏览器控制台（F12），看是否有Cannot set properties of null (setting 'innerHTML')的报错，这种报错就是找不到元素的典型表现。

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