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

发布于 2024-12-01 07:49:29 字数 737 浏览 2 评论 0原文

那么问题来了，这些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>

原文

As the question, these span elements display with two style in browser, why?

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

作死小能手 2024-12-08 07:49:29

因为两个 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>

是一个内联元素 – 也就是说，它的上方、下方或两侧没有空间。要留出空间，请在 Javascript 中的跨度之间添加，如下所示：

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

Because there's whitespace between the two HTML span elements. If you wrote it, for instance, like this, you'd see:

<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> is an inline element – That is, it has no space above, below, or to the sides. To have space, add between to the spans in the Javascript as such:

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

回复收藏 0 原文

压抑⊿情绪 2024-12-08 07:49:29

请查看此处的不间断空格部分： 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   character entity.

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


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

将呈现为


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

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

在您的示例中，请注意，在通过 JavaScript 添加到 DOM 的 html 中， span< 之间没有空格/code> 元素，因此它的渲染方式有所不同。

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

Look at the Non-Breaking Space section here: 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   character entity.

As it says, any amount of white space between two span elements (or any other inline elements) will be rendered as a single space. So the line break between


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

will be rendered as


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

(The line break is truncated to a single space.)

In your example, notice that in the html that is added to the DOM via JavaScript, there are no spaces between the span elements, so it is rendered differently.

If you need the two to match, you can either a) modify your HTML to match the HTML that you are injecting into the DOM in the JS or b) use a non-breaking space between the two spans you are injecting into the DOM in the JS.

回复收藏 0 原文

~没有更多了~