CODEWITHSUNDEEP
jqueryappendline-breaksdom-manipulationcss
Robert Koritnik
Robert Koritnik

Reputation: 105091

Add line breaks or spaces between elements when using jQuery .append()

I have a jQuery set of elements that I get from my DOM by calling:

$(".some-selector");

All my elements are DIVs each in its own line. My DIVs are set CSS (among other things)

display: inline-block;

which prevents them from rendering as block elements (each in its own line).

The problem is that when these DIV are rendered they have spaces between them because there's line break in the document between each element. I'm comfortable with that. I could of course use float:left that would get rid of these spaces but that's not what I want because I would have other problems with container sizing etc.

So. The problem is that I manipulate the order of these elements in my jQuery set an then rerender them. What I essentially do is:

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

The problem is that they get re-inserted into the DOM, but without line breaks or spaces...

How do I get these line breaks back in when appending my elements into DOM?

Upvotes: 24

Views: 27916

Answers (3)

Gras Double
Gras Double

Reputation: 16383

Šime's code has a caveat: it also adds a space after the last element.

Here is a version that avoids that space:

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

Live demo: http://jsfiddle.net/tqx19m3L/

Upvotes: 1

gilly3
gilly3

Reputation: 91707

After you re-insert your elements, append some whitespace to each of them using .after():

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

http://jsfiddle.net/z5cFw/

Upvotes: 43

Šime Vidas
Šime Vidas

Reputation: 186113

You could use map to put a single-space TextNode after each DIV:

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

Live demo: http://jsfiddle.net/Hnv2T/

Upvotes: 6

Related Questions