多HTML页面共用JS文件时，如何仅在指定页面用innerHTML获取元素

嗨，这个问题我碰到过好多次啦！当多个页面共用同一个JS文件时，确实会出现这种找不到元素导致报错的情况，其实解决起来很简单，给你两种实用的方法：

方法一：先检查元素是否存在再执行操作 #

这是最直接也最通用的方案，在获取元素内容之前，先判断这个元素是否存在（也就是不为null），只有存在的时候才去获取它的innerHTML。修改你的JavaScript代码如下：

// 先尝试获取目标元素
const html1Element = document.getElementById("html1");
// 只有元素存在时才执行后续逻辑
if (html1Element) {
  const x = html1Element.innerHTML;
  // 这里可以继续写你需要用x做的后续操作
}

这样一来，当打开页面2时，document.getElementById("html1")会返回null，代码就不会进入if块里执行获取innerHTML的操作，自然也就不会报错了。

方法二：根据页面特征区分执行逻辑 #

如果两个页面各自有独特的标识（比如页面1有html1元素，页面2有html2元素），你也可以通过判断这些标识来分别执行对应页面的逻辑，这样代码结构会更清晰：

// 判断当前是页面1还是页面2
if (document.getElementById("html1")) {
  // 页面1专属逻辑
  const x = document.getElementById("html1").innerHTML;
  // 页面1的其他操作...
} else if (document.getElementById("html2")) {
  // 页面2专属逻辑（如果需要的话）
  const y = document.getElementById("html2").innerHTML;
  // 页面2的其他操作...
}

这种方式不仅能避免报错，还能让不同页面的逻辑划分得更清楚，后续维护也更方便。

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