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?
Answer
After you re-insert your elements, append some whitespace to each of them using .after():
$(".some-selector").after(" ");