How do spaces cause parsing errors when adding list items in JavaScript innerHTML?

javascript innerhtml attribute usage problem

When dynamically adding html content using the innerhtml attribute of javascript, you sometimes encounter some strange problems, such as the tags that cannot be correctly recognized. This article will analyze the problems that may arise when dealing with html fragments containing spaces in a specific case and provide corresponding solutions.

Problem description:

The user tries to add a

element to a

element using the innerhtml attribute. The code is as follows:

 <div class="chat">
  <ul class="chat_list">
    <!-- His news-->
    <li class="left">
      <img src="/static/imghwm/default1.png" data-src="./assets/you.png" class="lazy" alt="">
      <span>Little baby</span>
    </li>
    <!-- My message-->
    <li class="right">
      <span>What to do</span>
      <img src="/static/imghwm/default1.png" data-src="./assets/me.png" class="lazy" alt="">
    </li>
  </ul>
</div>

 const ff = `1

`; document.queryselector('.chat_list').innerhtml = ff; document.queryselector('.chat_list').innerhtml = `1`;

The user found that the tag of the

element added with the variable ff was not parsed correctly, and the browser rendering result was displayed as 1, and the closed tag was missing. The

element added directly using the string literal value will also have problems, and the performance is similar to that of the variable ff.

Causes and solutions to the problem:

The reason for this problem is the space before the

tag. In html, the

tag cannot have leading spaces. The innerhtml attribute will parse the html strictly according to the passed string, so adding spaces before the

tag will cause parsing errors.

The solution is very simple, just remove the space before the

tag:

 const ff = `

1

`; document.querySelector('.chat_list').innerHTML = ff; document.querySelector('.chat_list').innerHTML = `

1

`;

By removing the spaces before the

tag, the innerhtml attribute can correctly identify and render the

element. The modified code will work properly.

The above is the detailed content of How do spaces cause parsing errors when adding list items in JavaScript innerHTML?. For more information, please follow other related articles on the PHP Chinese website!