点击元素时，希望用打字机效果动态替换段落文本，但新内容却追加在旧文本之后——根本原因是未预先清空目标元素的 `textcontent`，只需在动画开始前手动置空即可。
在使用 JavaScript 实现“打字机效果”时，一个常见误区是直接对 textContent 使用 += 操作符（如 el.textContent += char）。该操作不会自动清除原有内容，而是将新字符追加到现有文本末尾，导致重复叠加（例如初始文本为 "Click here..."，最终可能显示为 "Click here...Hello there..."）。
正确做法是在启动动画前，显式清空目标元素的文本内容：
document.getElementById("div_Container").addEventListener("click", function Typer() {
const targetEl = document.getElementById("typing_Text");
const text = "Hello there, I'm a college student and I have a keen eye for whacky and cheeky animations.";
const speed = 60;
let index = 0;
// ✅ 关键一步：先清空原有文本
targetEl.textContent = "";
function textEffect() {
if (index < text.length) {
targetEl.textContent += text.charAt(index); // 逐字追加（此时容器已为空）
index++;
setTimeout(textEffect, speed);
}
}
textEffect();
}, { once: true });? 为什么不用 innerHTML？ 虽然 innerHTML 也可实现类似效果，但若文本中不含 HTML 标签，应优先使用 textContent：它更安全（自动转义防止 XSS）、性能更高，且语义更准确。仅当需渲染富文本时才考虑 innerHTML。
注意事项：
- textContent 会移除所有子节点并设置纯文本，不解析 HTML；
- 使用 { once: true } 确保事件只触发一次，避免重复绑定导致多轮动画冲突；
- 若需支持中断重播（如多次点击），建议将 index 和 timeout 句柄封装为可重置状态，或在每次点击前清除上一轮定时器（clearTimeout）。
通过这一行 targetEl.textContent = ""，即可确保打字效果从干净画布开始，精准实现「替换式」逐字呈现。
