Jquery append() на другой строке?

Question

Я думал, что это будет просто, но этот код выводит мои пролеты на одной линии.

$("<p/>") 
    .append($("<span/>", { 
     class:"time", 
     text: content.time })) 
    .append($("<span/>", { 
     class: "content", 
     text: content.message 
    })); 

Но так как добавить эти элементы без новой строки, мои пролеты в конечном итоге нужно вручную интервал, который просто не представляется возможным в моем текущем масштабе.

<p><span class="time">now</span><span class="content">Lorem Ipsum ...</span></p> 

Как заставить jQuery вручную добавить мои интервалы на новой строке? Я пробовал использовать .after.

EDIT:

Я предполагаю, что я был немного неясно, до сих пор .append("\n") является то, что я ищу, если есть какие-то более эффективные способы, я все уши, но присоединяя <br/> тег, безусловно, не то, что Я искал.

<p> 
    <span class="time">now</span> 
    <span class="content">Lorem Ipsum ...</span> 
</p> 

Answer 1

Если вы хотите, чтобы HTML элемент будет appeneded к новой строке, вы можете вставить символ новой строки, \n, используя метод .after() перед добавлением второго span. При этом между словами будет пробел (начиная с inline элементов диапазона respect the whitespace in the markup).

Example Here

$("p").append($("<span/>", { 
    class: "time", 
    text: content.time 
}).after('\n')).append($("<span/>", { 
    class: "content", 
    text: content.message 
})); 

Answer 2

<span> является встроенным элементом. Вы можете изменить его, чтобы блокировать с помощью CSS:

span { 
    display: block; 
} 

или использовать after pseudoelement:

span::after { 
    content: "\A"; 
    white-space: pre; 
} 

или использовать <br />

Answer 3

Это должно работать

$("<p/>") 
    .append($("<span/>", { 
     class:"time", 
     text: content.time })) 
    .append("<br/>") 
    .append($("<span/>", { 
     class: "content", 
     text: content.message 
    })); 

Answer 4

Append разрыв строки отдельно, не присоединяя его к тексту, то он работает:

$("<p/>") 
    .append($("<span/>", { 
     class:"time", 
     text: content.time })) 
    .append($("<br />")) 
    .append($("<span/>", { 
     class: "content", 
     text: content.message 
    })) 
    .append($("<br />")); 

working fiddle