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 屬性就能正確識別并渲染
• 元素。 修改后的代碼將能夠正常工作。