问题描述
我认为这很简单但是这段代码在同一行输出了我的跨度。
$("<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>
1楼
如果希望将HTML元素附加到换行符，则可以在附加第二个span之前使用.after()方法插入换行符\\n 。
在这样做时，单词之间会有一个空格（因为inline span元素 ）。
$("p").append($("<span/>", {
class: "time",
text: content.time
}).after('\n')).append($("<span/>", {
class: "content",
text: content.message
}));
2楼
单独添加换行符，而不是通过将其连接到文本，然后它可以工作：
$("<p/>")
.append($("<span/>", {
class:"time",
text: content.time }))
.append($("<br />"))
.append($("<span/>", {
class: "content",
text: content.message
}))
.append($("<br />"));
3楼
<span>是内联元素。
您可以使用CSS将其更改为阻止：
span {
display: block;
}
或after伪元素after使用：
span::after {
content: "\A";
white-space: pre;
}
或使用<br />
4楼
这应该工作
$("<p/>")
.append($("<span/>", {
class:"time",
text: content.time }))
.append("<br/>")
.append($("<span/>", {
class: "content",
text: content.message
}));