如何通过JavaScript在跳转加载新页面时修改目标页面指定ID元素的内容

你的判断完全正确：每个页面的JavaScript运行在独立的上下文环境中，起始页的JS仅能操作当前页面的DOM节点，跳转触发后旧页面的运行上下文会被直接销毁，完全无法操作还未加载的第二页元素。

以下是两种原生JS即可实现的方案，不需要引入任何第三方库：

方案1：URL查询参数传递（推荐） #

该方案参数公开在URL中，支持页面刷新、页面分享后对应内容仍然正常展示，是最通用的实现方式。

1. 修改起始页HTML #

将需要传递的内容作为查询参数拼接在跳转链接末尾：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <a href="second-page.html?content=Option One">Click Here</a>
    <a href="second-page.html?content=Option Two">Click Here</a>
<script src="script.js"></script>
</body>
</html>

2. 修改script.js逻辑 #

新增第二页加载时的参数读取逻辑：

// 仅在第二页存在目标元素时执行替换
if (document.getElementById('content-id')) {
    // 原生API解析URL查询参数
    const urlParams = new URLSearchParams(window.location.search);
    const targetContent = urlParams.get('content');
    if (targetContent) {
        document.getElementById('content-id').innerHTML = targetContent;
    }
}

方案2：sessionStorage存储传递 #

该方案不会将参数暴露在URL中，适合传递非公开的临时内容，但页面分享给其他用户后无法展示对应内容。

1. 修改起始页HTML #

调整点击事件为存储参数逻辑：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <a href="second-page.html" onclick="saveContent('Option One')">Click Here</a>
    <a href="second-page.html" onclick="saveContent('Option Two')">Click Here</a>
<script src="script.js"></script>
</body>
</html>

2. 修改script.js逻辑 #

新增存储和读取逻辑：

// 起始页点击时调用的存储函数
function saveContent(content) {
    sessionStorage.setItem('targetContent', content);
}

// 第二页加载时读取内容
if (document.getElementById('content-id')) {
    const targetContent = sessionStorage.getItem('targetContent');
    if (targetContent) {
        document.getElementById('content-id').innerHTML = targetContent;
        // 可选：读取后清除存储，避免下次打开页面残留旧内容
        sessionStorage.removeItem('targetContent');
    }
}

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