跨HTML页面操作DOM元素遇阻：获取目标div.pbox返回null的解决方案咨询

首先得明确一个关键概念：每个HTML页面在浏览器中都是独立的文档上下文。当你在index.html里点击按钮执行add()方法时，浏览器当前只加载了index.html的DOM树，test.html的内容完全不在这个上下文里，所以你直接用document.querySelector('.pbox')肯定会返回null——因为这个元素根本不存在于当前页面的DOM中。

你没法直接从一个页面“访问”另一个页面的DOM元素，必须通过数据传递的方式，让目标页面（也就是test.html）在加载时自己处理内容的追加。下面给你两种最常用的解决方案：

方案1：通过URL参数传递内容 #

这个方法的思路是：点击按钮时，把要追加的内容通过URL参数传递给test.html，然后test.html在加载时读取这个参数，再把内容追加到.pbox里。

修改index.html的JS代码： #

function add() {
  // 定义要追加的内容，这里可以自定义
  const newContent = '<p>这是新追加的段落</p>';
  // 把内容转义后拼到URL里（避免特殊字符出问题）
  const encodedContent = encodeURIComponent(newContent);
  // 跳转到test.html并带上参数
  window.location.href = `test.html?content=${encodedContent}`;
}

在test.html中添加JS代码： #

// 页面加载完成后执行
window.addEventListener('DOMContentLoaded', () => {
  // 读取URL中的参数
  const urlParams = new URLSearchParams(window.location.search);
  const content = urlParams.get('content');
  // 如果有内容，就追加到.pbox里
  if (content) {
    const pbox = document.querySelector('.pbox');
    // 解码后插入内容
    pbox.innerHTML += decodeURIComponent(content);
    // 可选：清空URL参数，避免刷新页面重复添加
    window.history.replaceState({}, document.title, window.location.pathname);
  }
});

方案2：使用本地存储（localStorage）传递数据 #

如果要传递的内容比较复杂（比如长文本、JSON数据），用URL参数可能不太方便，这时候可以用浏览器的localStorage来临时存储数据。

修改index.html的JS代码： #

function add() {
  const newContent = '<p>通过localStorage传递的内容</p>';
  // 把内容存在localStorage里，自定义一个key
  localStorage.setItem('appendContent', newContent);
  // 跳转到test.html
  window.location.href = 'test.html';
}

在test.html中添加JS代码： #

window.addEventListener('DOMContentLoaded', () => {
  const content = localStorage.getItem('appendContent');
  const pbox = document.querySelector('.pbox');
  if (content && pbox) {
    pbox.innerHTML += content;
    // 重要：用完后删除localStorage里的内容，避免下次打开test.html重复添加
    localStorage.removeItem('appendContent');
  }
});

额外说明 #

• 这两种方案都是基于“跳转页面后，目标页面主动读取数据并处理”的逻辑，这是浏览器环境下跨页面交互的标准方式，因为浏览器会隔离不同页面的上下文，不允许直接操作其他页面的DOM。
• 如果你不需要跳转页面，而是想在同一个窗口里同时显示两个页面的内容，可以考虑用iframe，但这和你当前的需求不太匹配。

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