点击元素时，通过 javascript 实现打字效果，需先清空原有文本再逐字写入，否则新内容会追加在旧文本后。关键在于首次执行前手动置空 `textcontent`。
在使用 textContent += ... 实现逐字打字动画时，一个常见误区是忽略初始状态清理——由于 += 是“追加”操作，若目标元素（如 <p id="typing_Text">）已存在文本（例如 "Click here to learn about me."），新字符将直接拼接在其后，导致内容重复叠加。
✅ 正确做法是在启动动画前，显式清空目标元素的文本内容：
document.getElementById("div_Container").addEventListener("click", function Typer() {
const target = document.getElementById("typing_Text");
const text = "Hello there, I'm a college student and I have a keen eye for whacky and cheeky animations.";
let index = 0;
const speed = 60;
// ✅ 关键一步：清空原有文本，确保从空白开始
target.textContent = "";
function textEffect() {
if (index < text.length) {
target.textContent += text.charAt(index); // 逐字追加（此时已为空）
index++;
setTimeout(textEffect, speed);
}
}
textEffect();
}, { once: true });⚠️ 注意事项：
- 不要使用 innerHTML = "" 替代 textContent = ""，除非你明确需要保留或解析 HTML 标签；textContent 更安全、高效，且可防止 XSS 风险；
- once: true 选项确保事件仅触发一次，避免重复点击引发多线程动画冲突；
- 若需支持中英文混排或 emoji，text.charAt(index) 在现代浏览器中基本可靠，但对复杂 Unicode 字符（如组合表情）建议改用 Array.from(text)[index] 以确保正确切分；
- 如需暂停/重置动画，应将 index 和 timeout 句柄封装为可控制的状态对象，而非依赖闭包内联变量。
总结：textContent += 本身无错，但必须配合前置清空逻辑才能实现「替换」语义。这是 DOM 文本操作中最易被忽视的基础原则之一。
立即学习“前端免费学习笔记（深入）”；
