为何innerHTML标签无法正确识别？

Question

为什么JavaScript的innerHTML标签无法正确识别这段语句呢？

<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>`

以上这两句有什么区别吗？为什么我通过变量来添加 innerHTML 的内容会无法正确识别标签？

通过浏览器，我查看了第一句的渲染，发现是 < li class="left">1 加了双引号，但是最后一个 </li> 却没有正确识别。请问是什么原因？求各位大神指教。

Answer 1

去掉 < li class="left"> 中开头的空格就行了。

- const ff = `< li class="left">1</li>`
+ const ff = `<li class="left">1</li>`