本文讲解如何在每次点击按钮时重置目标元素的 innerhtml，清除之前动态追加的内容，同时保留固定的前缀文本（如“background colour : ”），避免字符串重复拼接导致的显示问题。

本文讲解如何在每次点击按钮时重置目标元素的 innerhtml，清除之前动态追加的内容，同时保留固定的前缀文本（如“background colour : ”），避免字符串重复拼接导致的显示问题。

在前端开发中，使用 element.innerHTML += "text" 是常见的动态追加内容方式，但这会导致内容不断累积——例如每次点击按钮都向

中追加颜色名称，最终显示为 “Background Colour : RedBlueYellowRed…”。要实现“重置后重新写入”，关键在于先清空并恢复原始结构，再追加新内容。

✅ 正确做法：重置 + 选择性追加

核心逻辑分两步：

1. 重置 innerHTML 为初始状态（含固定前缀）；
2. 再用 += 追加本次生成的新内容。

以下是完整、可直接运行的示例代码：

Markdown to HTML

{"answer":"将 Markdown 转换为内嵌 CSS、样式精美的独立 HTML。完美适用于新闻简报、文档、报告及邮件模板。"}

下载

<h1 class="background-colour-box" id="insert-colour">Background Colour : </h1>
<button class="button" id="button">Click Me</button>

document.getElementById('button').addEventListener('click', function() {
  const textPlacement = document.getElementById("insert-colour");
  const simpBackgroundColour = Math.floor(Math.random() * 3) + 1;

  // ✅ 第一步：重置为原始文本（保留前缀）
  textPlacement.innerHTML = "Background Colour : ";

  // ✅ 第二步：根据随机结果追加对应颜色名
  if (simpBackgroundColour === 1) {
    document.body.style.backgroundColor = "#eb1e17";
    textPlacement.innerHTML += "Red";
  } else if (simpBackgroundColour === 2) {
    document.body.style.backgroundColor = "#2390de";
    textPlacement.innerHTML += "Blue";
  } else {
    document.body.style.backgroundColor = "#d9d923";
    textPlacement.innerHTML += "Yellow";
  }
});

⚠️ 注意事项

• 不要用 innerHTML = "" 彻底清空：否则会丢失“Background Colour : ”前缀，需手动重建；
• 推荐使用 textContent 替代 innerHTML（若无需 HTML 标签）：更安全、防 XSS，且性能略优；
  例如：textPlacement.textContent = "Background Colour : " + colorName;
• 确保按钮有唯一 ID（如 id="button"）：原示例中
  无法通过 getElementById('button') 获取，已修正为 ；

  语义化建议：标题标签 不合法，应改为

  或 （根据语义选择）。

  ? 扩展思路：封装复用函数

  若逻辑需多次调用，可封装为函数提升可维护性：

  function updateColorDisplay() {
    const colors = [
      { name: "Red", hex: "#eb1e17" },
      { name: "Blue", hex: "#2390de" },
      { name: "Yellow", hex: "#d9d923" }
    ];
    const randomColor = colors[Math.floor(Math.random() * colors.length)];
  
    const el = document.getElementById("insert-colour");
    el.innerHTML = "Background Colour : " + randomColor.name;
    document.body.style.backgroundColor = randomColor.hex;
  }
  
  document.getElementById('button').addEventListener('click', updateColorDisplay);

  通过明确重置初始状态 + 条件追加，即可稳定控制 DOM 文本输出，避免累积污染，是处理动态文本更新的通用实践。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！