通过jQuery构建时Div的内容格式不同

Question

我有以下DOM结构：

<div id="module-main">
 <div id="module-crumbs">
  <h4>Hello</h4>
 </div>
</div>

当我将它放在文档中并查看它时，它工作正常。但是，如果我像这样从jQuery构建它：

$('#module-main').append($('<div id=\"module-crumbs\" />'));
$('#module-crumbs').append($('<h4/>').html('Hello'));

而不是在“module-crumbs”中扩展的H4边距，它将扩展到“module-main”之外......最令人困惑的是在jQuery运行之后DOM结构完全相同。如果结果相同，浏览器如何计算边距以及为什么通过Javascript和手工编码来实现它的重要性？有什么想法吗？

谢谢！

编辑：虽然我标记了最佳答案，因为它以更易读的方式重写了我正在做的事情，问题的真正根本原因是崩溃了没有用jQuery触发的边距，因为jQuery正在调用module-crumb而不是module-crumbs并没有什么可以阻止边界崩溃。使用1px填充将它组合在一起（边框也可以起作用）。

Answer 1

由标记产生的DOM和由jQuery生成的DOM不一样 - html（）方法的行为与您期望的不同。

初始标记中的H4元素仅包含单个文本节点。

要使用jQuery构建相同的DOM，请使用：

$('#module-main').append($('<div id=\"module-crumbs\" />'));
$('#module-crumbs').append($('<h4/>').append('Hello'));

对于更像标记的表示（通常更容易阅读），请尝试：

$('#module-main').append(
    $('<div id="module-crumbs" />').append(
        $('<h4/>').append('Hello')
    )
);