Почему при использовании innerHTML нет промежутка между двумя элементами span? - PullRequest
Новая
       1

Почему при использовании innerHTML нет промежутка между двумя элементами span?

1 голос
/ 25 августа 2011

Как вопрос, эти элементы 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>

Ответы [ 2 ]

4 голосов
/ 25 августа 2011

Поскольку между двумя элементами HTML-диапазона есть пробелы.Например, если бы вы написали это так, вы бы увидели: 

<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> - это встроенный элемент - то есть у него нет места сверху, снизу или по бокам.Чтобы освободить место, добавьте &nbsp; между интервалами в Javascript следующим образом: 

      var html = '<div><span class="edited-box">sfds</span>&nbsp;<span class="added-box">sfds</span></div>';
2 голосов
/ 25 августа 2011

Посмотрите на раздел «Неразрывный пробел» здесь: 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>

(разрыв строки усекается до одного пробела.)

В вашем примере обратите вниманиечто в html, который добавляется в DOM через JavaScript, между элементами span нет пробелов, поэтому он отображается по-разному.

Если вам нужно, чтобы они совпадали, вы можете либо a) изменитьваш HTML, чтобы соответствовать HTML, который вы вводите в DOM в JS, или b) использовать неразрывный пробел между двумя интервалами, которые вы вводите в DOM в JS.

...