Question

作为问题，这些span元素在浏览器中显示两种样式，为什么？

<html>
  <head>
    <title></title>
    <script type="text/javascript">
    function loadHTML() {
      var html = '<span class="edited-box">sfds</span><span class="added-box">sfds</span>';
      document.getElementById('content').innerHTML = html;
    }
    </script>
  </head>
  <body>
    <div style="background-color:#ccc;" onclick="loadHTML();">click to add span</div>
    <div id="content"></div>
    <div>
      <span class="edited-box">sfds</span>
      <span class="added-box">sfds</span>
    </div>
  </body>
</html>

Answer 1

因为两个HTML span元素之间有空格。例如，如果您这样编写，就会看到：

<html>
  <head>
    <title></title>
    <script type="text/javascript">
    function loadHTML() {
      var html = '<div><span class="edited-box">sfds</span><span class="added-box">sfds</span></div>';
      document.getElementById('content').innerHTML = html;
    }
    </script>
  </head>
  <body>
    <div style="background-color:#ccc;" onclick="loadHTML();">click to add span</div>
    <div id="content"></div>
    <div>
      <span class="edited-box">sfds</span><span class="added-box">sfds</span>
    </div>
  </body>
</html>

<span>是一个内联元素 - 也就是说，它在上方，下方或侧面没有空格。要获得空间，请在Javascript中的跨度之间添加 ：

      var html = '<div><span class="edited-box">sfds</span>&nbsp;<span class="added-box">sfds</span></div>';

Answer 2

请查看此处的非破碎空间部分：http://www.w3schools.com/HTML/html_entities.asp

"Browsers will always truncate spaces in HTML pages. If you write 10 spaces in 
your text, the browser will remove 9 of them, before displaying the page. To add 
spaces to your text, you "can use the &nbsp; character entity.

正如它所说，两个span元素（或任何其他内联元素）之间的任何数量的空格都将呈现为单个空格。所以在

之间断行


<span>sfds</span>
<span>sfds</span>

将呈现为


<span>sfds</span> <span>sfds</span>

（换行符被截断为单个空格。）

在您的示例中，请注意，在通过JavaScript添加到DOM的html中，span元素之间没有空格，因此呈现的方式不同。

如果你需要两者匹配，你可以a）修改你的HTML以匹配你注入JS中的DOM的HTML或b）使用你注入的两个跨度之间的不间断空格JS中的DOM。

为什么在使用innerHTML时两个span元素之间没有间距？

2 个答案: