Javascript新手求助：innerHTML无法将navigator信息写入userAgent元素

你的问题核心在于脚本执行时机过早：你把main.js放在<head>标签里，浏览器加载到这个脚本时，<body>中的#userAgent元素还没被解析创建，导致document.getElementById("userAgent")返回null，自然无法设置innerHTML。

下面是三种可行的解决方式：

方法一：将脚本移到<body>末尾 #

把引入main.js的<script>标签放到</body>标签之前，让浏览器先解析完所有DOM元素再执行脚本：

<body>
    <!-- 所有页面内容（导航、wrapper等） -->
    <hr height="45px" width="100%">
    <script src="main.js"></script>
</body>

方法二：用DOMContentLoaded事件包裹代码 #

在main.js中，把你的代码放在DOMContentLoaded事件监听内，确保DOM完全加载后再执行逻辑：

document.addEventListener('DOMContentLoaded', function() {
    let text = "<p>Browser CodeName: " + navigator.appCodeName + "</p>" +
      "<p>Browser Name: " + navigator.appName + "</p>" +
      "<p>Browser Version: " + navigator.appVersion + "</p>" +
      "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>" +
      "<p>Browser Language: " + navigator.language + "</p>" +
      "<p>Browser Online: " + navigator.onLine + "</p>" +
      "<p>Platform: " + navigator.platform + "</p>" +
      "<p>User-agent header: " + navigator.userAgent + "</p>";

    const targetElement = document.getElementById("userAgent");
    if (targetElement) {
        targetElement.innerHTML = text;
    } else {
        console.error("未找到id为userAgent的元素");
    }
});

方法三：给<script>标签添加defer属性 #

保留<script>在<head>中，添加defer属性让脚本在DOM解析完成后再执行：

<head>
    <title></title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="main.css">
    <script src="main.js" defer></script>
</head>

内容的提问来源于stack exchange，提问作者Andres Meza III