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。

编辑：

我想我有点不清楚，到目前为止.append("\n")正是我正在寻找的，如果有更好的方法，我很满耳，但附加一个<br/>标签肯定不是我在寻找什么。

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

Answer 1

如果您希望将HTML元素添加到换行符，则可以在追加第二个\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

单独添加换行符，而不是将其连接到文本，然后它可以工作：

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

working fiddle

Answer 3

<span>是内联元素。您可以使用CSS将其更改为阻止：

span {
    display: block;
}

或使用after伪元素：

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

或使用<br />

Answer 4

这应该有效

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

Jquery在另一行上追加（）？

4 个答案: