使用 jQuery .append() 时在元素之间添加换行符或空格答案

【问题标题】：Add line breaks or spaces between elements when using jQuery .append()使用 jQuery .append() 时在元素之间添加换行符或空格
【发布时间】：2011-10-17 20:27:03
【问题描述】：

我有一组通过调用从 DOM 中获取的 jQuery 元素：

$(".some-selector");

我所有的元素都是 DIV，每个元素都在自己的行中。我的 DIV 设置为 CSS（除其他外）

display: inline-block;

这会阻止它们呈现为块元素（每个元素都在自己的行中）。

问题是，当这些 DIV 被渲染时，它们之间有空格，因为文档中每个元素之间都有换行符。我对此很满意。我当然可以使用float:left 来消除这些空间，但这不是我想要的，因为我在容器大小等方面会遇到其他问题。

所以。问题是我在我的 jQuery 集合中操纵这些元素的顺序，然后重新渲染它们。我基本上做的是：

$(".some-selector").detach().manipulate().appendTo(".container");
// or equivalent
$(".container").append($(".some-selector").detach().manipulate());

问题是它们被重新插入到 DOM 中，但没有换行符或空格...

在将我的元素附加到 DOM 时如何恢复这些换行符？

【问题讨论】：

标签： jquery append line-breaks dom-manipulation css

【解决方案1】：

重新插入元素后，使用 .after() 为每个元素添加一些空格：

$(".some-selector").after(" ");

http://jsfiddle.net/z5cFw/

【讨论】：

这不起作用 - SPAN 元素之间没有空格：jsfiddle.net/u5jBS/1
@Šime：它有效，但他的示例是使用.append() 而不是.after()，就像在答案中一样。 jsfiddle.net/z5cFw
我想在 jsfiddle 中有 bug 比在发布的答案中更好，对吧？ :-) 感谢您修复 jsfiddle！
虽然我对 jQuery 文档的理解有误，但它仍然有效：一个或多个额外的 DOM 元素、元素数组、HTML 字符串或 jQuery 对象插入到每个元素的末尾一组匹配的元素。 我认为它将在每个元素之后附加它，因为我将一个集合附加到一个元素，而文档实际上是指将一个元素附加到一个集合。 :) 谢谢大家。

【解决方案2】：

您可以使用map 在每个 DIV 之后放置一个单空格 TextNode：

$('.some-selector').detach().manipulate().map(function() {
    return [this, document.createTextNode(' ')];
}).appendTo('.container');

现场演示： http://jsfiddle.net/Hnv2T/

【讨论】：

这真是一个聪明的人。也向我 +1。

【解决方案3】：

Šime 的代码有一个警告：它还在最后一个元素之后添加了一个空格。

这是一个避免该空格的版本：

$('.some-selector').detach().manipulate().map(function (index, element) {
    return index === 0 ? element : [document.createTextNode(' '), element];
}).appendTo('.container');

现场演示： http://jsfiddle.net/tqx19m3L/

【讨论】：