Search code examples
javascriptjqueryhtmlcssjquery-after

jQuery elements added with after() have incorrect spacing

I have a <ul> with a number of <li> elements in it. A number of them are hidden and are added to the end of the list upon clicking with jQuery after().

However, for some reason, the elements added with after() are always a bit too close to the element they are added after.

I have made a jsbin to demonstrate here

Also, a screenshot to explain:

enter image description here

The reason for using after() instead of a simple addClass or show is because the list relies on applying styles with li:nth-child(even), so if the elements are there, but only hidden, it causes issues in the styling of the list.

Solution

  • The answer is because the <li> elements are inline, and in your HTML are separated by a newline, which when rendered creates a space between them.

    When you are programatically inserting elements, they are not separated by a newline so no space appears between them.

    You can see the effect of the newline by placing all the li elements on a single line, the spacing will disappear, or by adding float:left to the li in your CSS

    Demo of this effect

    More reading...