javascript - 谁能解释为什么 jQuery 附加的内联 block 元素会丢失空间？

Question

所以我正在做一个元素，涉及克隆一些对象并将它们附加到同一个父对象，然后我为这些对象设置动画，但我的计算似乎总是不对，我意识到这是因为内联 block 元素总是有尾随空格，这很好，但是当我将使用 jQuery 的克隆项附加到父 div 时，尾随空格不包括在内，这使得事情非常不一致且难以使用。

当使用浏览器工具检查元素时，元素声称是相同的，设置边距和填充没有区别，这是一个错误还是我只是遗漏了什么？下面是一个复制结果的简单演示

https://jsfiddle.net/kd5opn7j/2/

$('ul').find('li').each(function(){
  $('ul').append($(this).clone());
});

li {
  display: inline-block;
  width:50px;
  height:50px;
  background: #555;
}

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

Answer 1

框之间的空间来自标记中的换行符和缩进。 jQuery 在追加元素时不保留这种格式样式，因为它修改了 DOM，而不是直接修改标记，并且它只追加您指定的元素。

换句话说，在 jQuery 完成附加新元素后，您的标记实际上是这样的:

<ul>
    <li></li>
    <li></li>
    <li></li>
<li></li><li></li><li></li></ul>

为了便于展示，检查器以层次结构显示元素。它不反射(reflect)实际(或生成的)标记。

如果你想保留元素之间的空白，你可以通过appending a literal space either before or after each new element作弊。 :

$('ul').find('li').each(function(){
  $('ul').append(' ').append($(this).clone());
});

或者，如果您出于某种原因绝对必须保留原始缩进样式(这将反射(reflect)在父级的 innerHTML 中)...

$('ul').find('li').each(function(){
  $('ul').append('    ').append($(this).clone()).append('\n');
});

请注意，这不会对渲染产生任何影响，因为所有连续的空格和换行符都将折叠成一个空格。