如何从HTML元素获取内容替代硬编码实现JS打字效果？

错误分析 #

你的代码存在几个关键问题：

• 未定义myElement变量，应该使用已获取的typingText元素
• 原代码依赖数组结构，但你把words改成了字符串，仍用words[wordIndex]会取字符串的单个字符而非完整文本
• 未清空原元素内容，导致打字内容会和原有内容叠加

修正后的代码 #

const typingText = document.getElementById("typingText");
// 保存原元素的纯文本内容，避免HTML标签干扰
const targetText = typingText.textContent.trim();
// 清空元素，准备开始打字效果
typingText.textContent = "";

let letterIndex = 0;

function typeWords() {
  if (letterIndex < targetText.length) {
    // 逐个添加字符到元素中
    typingText.textContent += targetText.charAt(letterIndex);
    letterIndex++;
    setTimeout(typeWords, 200);
  }
}

typeWords();

代码说明 #

1. 用textContent获取元素的纯文本内容，比innerHTML更安全，避免意外引入HTML标签，trim()用于去除内容首尾的多余空格
2. 先清空目标元素的内容，确保打字效果从空白状态开始展示
3. 去掉了不必要的wordIndex变量，因为现在仅处理一段完整文本，而非多单词数组
4. 核心逻辑简化为逐个字符追加到元素中，直到所有字符输出完成

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