Содержимое Div форматируется по-разному при сборке через jQuery

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'));

Вместо того, чтобы поля H4 расширялись внутри "module-crumbs", он расширялся бы только за "module-main" ... что больше всего мешаетчто структура DOM точно такая же после запуска jQuery.Как браузер рассчитывает поля и почему это имеет значение, если я делаю это с помощью Javascript или ручного кодирования, если результаты совпадают?Любые идеи?

Спасибо!

Редактировать: Хотя я отметил лучший ответ, поскольку он переписал то, что я делал, в гораздо более читабельной форме, настоящая основная причина проблемы закончиласьэто сворачивание полей, которые не запускались с помощью jQuery, потому что jQuery вызывал крошку модуля вместо крошек модуля, и ничто не могло предотвратить разрушение границы.Помещение отступа в 1 пиксель свело его вместе (граница тоже бы сработала).

Answer 1

DOM, полученный из разметки и сгенерированный jQuery, не совпадает - метод html () не работает так, как вы ожидаете.

Элемент H4 в исходной разметке содержит только одинтекстовый узел.

Чтобы построить тот же DOM с jQuery, используйте:

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

Для более похожего на разметку представления (которое часто легче читать), попробуйте:

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