JavaScript innerHTML添加列表项时，空格是如何导致解析错误的？

JavaScript innerhtml 属性使用中的空格问题

在使用 javascript 的 innerHTML 属性动态添加 html 内容时，有时会遇到一些奇怪的问题，例如标签无法被正确识别。本文将针对一个具体的案例，分析 innerhtml 属性在处理包含空格的 html 片段时可能出现的问题，并提供相应的解决方案。

问题描述：

用户尝试使用 innerhtml 属性向一个

元素中添加
• 元素。代码如下：

  <div class="chat">   <ul class="chat_list">     <!-- 他的消息 -->     <li class="left">       @@##@@       <span>小宝贝</span>     </li>     <!-- 我的消息 -->     <li class="right">       <span>干啥</span>       @@##@@     </li>   </ul> </div>

  const ff = `< li class="left">1</li>`; document.queryselector('.chat_list').innerhtml += ff; document.queryselector('.chat_list').innerhtml += `< li class="left">1</li>`;

  用户发现，使用变量 ff 添加的

• 元素的标签没有被正确解析，浏览器渲染结果显示为 1，缺少闭合标签

。而直接使用字符串字面量添加的

• 元素，则同样出现问题，表现与变量ff的情况类似。

  立即学习“Java免费学习笔记（深入）”；

  问题原因及解决方法：

  造成这个问题的原因在于

• 标签前的空格。 在 html 中，
• 标签不能有前导空格。 innerhtml 属性会严格按照传入的字符串解析 html，因此在
• 标签前添加空格会导致解析错误。

  解决方法非常简单，只需要移除

• 标签前的空格即可：

  const ff = `<li class="left">1</li>`; document.querySelector('.chat_list').innerHTML += ff; document.querySelector('.chat_list').innerHTML += `<li class="left">1</li>`;

  通过去除

• 标签前的空格， innerhtml 属性就能正确识别并渲染
• 元素。 修改后的代码将能够正常工作。