为何该打字机效果函数会输出多余空格？

嘿，这个问题我之前也碰到过，挺有意思的！让我帮你拆解一下背后的原因~

问题的根源其实出在你的<script>标签放在了<body>内部，再加上你用了document.body.innerHTML +=这种方式来追加字符，两者结合就产生了这个奇怪的空格。具体来说：

1. 页面刚加载时，<body>里包含了你的整个<script>标签，而且你代码里<body> <script>和</script> </body>的前后都有空格，这些空格会被浏览器当作<body>内的文本节点保存下来。
2. 当第一次调用type()执行document.body.innerHTML += 'L'时，浏览器会先把当前<body>的所有内容（包括<script>标签、它的代码，还有那些隐藏的空格）转换成完整的HTML字符串，然后把'L'拼接到这个字符串的末尾，再重新设置<body>的innerHTML。
3. 这时候浏览器会重新解析新的HTML：它会创建一个新的<script>元素（但这个新script不会再执行，因为页面已经加载完了），同时原来的<script>元素会被销毁。但那些原本在<script>标签前后的空格，会被保留成可见的文本节点。

至于你看到的"L"后面的空格，其实大概率是浏览器解析时，把<script>标签后面的空格和你追加的字符混在了一起——比如第一次追加"L"后，页面实际显示的是「空格+L」，但当你继续追加"o"时，第二次的innerHTML +=又把新的字符拼接到了包含空格的字符串后面，看起来就像是"L"后面多了个空格。

你说的「在文本前加空格」能临时解决问题，其实是用新增的空格抵消了原来的前置空格，让显示看起来正常，但这只是治标不治本的办法。更靠谱的解决方式有两种：

• 把<script>标签移到<head>里：这样<body>初始是空的，每次追加字符都是直接加到空内容后面，完全不会有多余空格干扰。
• 改用appendChild添加文本节点：这种方式不会重新渲染整个DOM，只是在<body>末尾直接添加字符，彻底避开HTML解析带来的空格问题。代码改成这样就行：

  document.body.appendChild(document.createTextNode(txt.charAt(i)));
  

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