JavaScript 打字机效果：如何轻松解决无法输入 `<` 字符的问题？

2024-03-06 09:47:55

JavaScript 打字机效果：解决无法键入 < 字符的难题

在 JavaScript 的开发世界中，运用 innerHTML 属性为网页注入动态 HTML 代码是再普遍不过的操作。虽然这项功能强大无匹，却也潜藏着一些需要留心的细微末节，比如在插入 HTML 实体时可能遭遇的麻烦。

问题：无法键入 < 字符

当你在 innerHTML 中尝试插入 < 符号时，浏览器会将其解释为 HTML 标签而不是文本。因此，< 字符无法如你所愿地呈现于页面中。

解决方案：编码 < 为 <

为了解决这个问题，需要将 < 实体编码为 <。这样一来，浏览器就会将其理解为文本而不是标签。

innerHTML += '&lt;';

修改后的代码

应用上述解决方案后，你的代码将焕然一新：

let other = document.getElementById('other');
let txt = "Hello World &lt;br&gt; this typing effect.";
let i = 0;

function typeWriter() {
  if (i < txt.length) {
    other.innerHTML += txt.charAt(i);
    i++;
    setTimeout(typeWriter, 10);
    window.scrollTo(0, document.body.scrollHeight);
  }
}

typeWriter();

至此，你将能够在网页中顺利插入 < 字符，打字机效果得以完美呈现。

常见问题解答

为什么 innerHTML 会误将 < 解读为标签？

因为 innerHTML 旨在将 HTML 代码插入网页中。因此，当它遇到 < 时，会默认将其当作标签的起始符。
除了 < 之外，还有其他 HTML 实体需要编码吗？

是的，其他常见的 HTML 实体包括 >（大于号）、&（与号）和  （非间断空格）。
使用 innerHTML 时需要注意哪些其他事项？

谨慎处理用户输入，防止恶意代码注入。此外，避免直接插入脚本，以防造成安全漏洞。
有什么替代 innerHTML 的方法可以插入 HTML 代码？

有，你可以使用 createElement 和 appendChild 方法创建和附加 HTML 元素。
在 JavaScript 中如何设置定时器？

使用 setTimeout 函数。它会指定一个函数，以及在多少毫秒后执行该函数。