嘿，这个需求很常见，我来给你两种简单易行的方案，都能完美实现你要的切换效果！

方案一：用状态变量跟踪当前内容（推荐） #

这种方法逻辑清晰，尤其适合后续可能扩展内容的场景，不会因为元素初始的HTML结构干扰切换逻辑。

修改你的JavaScript代码如下：

let button = document.getElementById("js");
// 初始化状态，对应我们要切换的第一个值
let currentContent = "test";

button.onclick = function() {
  const targetElement = document.getElementById("test");
  // 三元运算符快速切换状态
  currentContent = currentContent === "test" ? "another test" : "test";
  // 赋值给innerHTML
  targetElement.innerHTML = currentContent;
};

原理说明 #

我们用currentContent变量专门记录当前显示的内容，每次点击按钮时，通过三元运算符判断当前值，直接切换到另一个状态，再把新值赋值给目标元素的innerHTML。这样不管元素初始是什么内容，第一次点击后都会进入"test"和"another test"的循环切换。

方案二：直接判断当前innerHTML的值 #

如果你的切换内容非常简单，也可以直接通过判断元素当前的innerHTML来实现切换：

let button = document.getElementById("js");

button.onclick = function() {
  const targetElement = document.getElementById("test");
  // 检查当前内容，切换到对应的值
  if (targetElement.innerHTML === "test") {
    targetElement.innerHTML = "another test";
  } else {
    // 首次点击会把初始的<p>this is a test</p>替换成"test"
    targetElement.innerHTML = "test";
  }
};

注意事项 #

如果你的目标元素初始内容包含HTML标签（比如你代码里的<p>），第一次点击会直接替换成"test"，之后就会在两个目标值之间正常切换。如果想让首次点击就从初始内容切换到"another test"，可以调整判断条件，比如先检查是否是初始的<p>this is a test</p>，但一般来说第一种方案更灵活。

额外小提示：优先用textContent（如果是纯文本） #

如果你的切换内容只是纯文本，没有HTML标签，建议用textContent代替innerHTML，这样更安全，能避免潜在的XSS风险，用法和innerHTML完全一致：

// 替换成textContent的版本
targetElement.textContent = currentContent;

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