JavaScript innerHTML添加列表项时，空格是如何导致解析错误的？-js教程-PHP中文网

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

碧海醫心

发布： 2025-03-24 11:58:26

原创

720人浏览过

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

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

问题描述：

用户尝试使用 innerhtml 属性向一个 <ul> 元素中添加 <li> 元素。代码如下：

<div class="chat">
  <ul class="chat_list">
    <!-- 他的消息 -->
    <li class="left">
      <img src="./assets/you.png" alt="">
      <span>小宝贝</span>
    </li>
    <!-- 我的消息 -->
    <li class="right">
      <span>干啥</span>
      <img src="./assets/me.png" alt="">
    </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 添加的 <li> 元素的标签没有被正确解析，浏览器渲染结果显示为

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

问题原因及解决方法：

飞书多维表格

表格形态的AI工作流搭建工具，支持批量化的AI创作与分析任务，接入DeepSeek R1满血版

查看详情

造成这个问题的原因在于 <li> 标签前的空格。在 html 中，<li> 标签不能有前导空格。 innerhtml 属性会严格按照传入的字符串解析 html，因此在 <li> 标签前添加空格会导致解析错误。

解决方法非常简单，只需要移除 <li> 标签前的空格即可：

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

登录后复制

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

以上就是JavaScript innerHTML添加列表项时，空格是如何导致解析错误的？的详细内容，更多请关注php中文网其它相关文章！