Title: Add Element after every second element
Tags: javascript;jquery;css;html
Question: I got a list where i want to add a div after every second list element.
My problem is that the first element is a span.
I want to have it like this:
<ul class="timeline"&gt;
<span class="topbullet"&gt;</span&gt;
<li&gt;</li&gt;
<li&gt;</li&gt;
<div class="clearfix"&gt;</div&gt;
<li&gt;</li&gt;
<li&gt;</li&gt;
<div class="clearfix"&gt;</div&gt;
<li&gt;</li&gt;
<li&gt;</li&gt;
<div class="clearfix"&gt;</div&gt;
<li&gt;</li&gt;
<li&gt;</li&gt;
<div class="clearfix"&gt;</div&gt;
<li&gt;</li&gt;
<li&gt;</li&gt;
<div class="clearfix"&gt;</div&gt;
</ul&gt;
But i get it like this:
<ul class="timeline"&gt;
<span class="topbullet"&gt;</span&gt;
<li&gt;</li&gt;
<div class="clearfix"&gt;</div&gt;
<li&gt;</li&gt;
<li&gt;</li&gt;
<div class="clearfix"&gt;</div&gt;
<li&gt;</li&gt;
<li&gt;</li&gt;
<div class="clearfix"&gt;</div&gt;
<li&gt;</li&gt;
<li&gt;</li&gt;
<div class="clearfix"&gt;</div&gt;
<li&gt;</li&gt;
<li&gt;</li&gt;
<div class="clearfix"&gt;</div&gt;
<li&gt;</li&gt;
</ul&gt;
Here is the JQuery Code i used:
$(document).ready(function(){
$(".timeline li:nth-child(2n)").add('.timeline li:last').after("<div class='clearfix'&gt;</div&gt;");
Comment: Just a heads-up, list elements, like `ol` or `ul` should only contain list items (`li`) for valid markup.

Comment: what does the original html look like before you run the script?

Comment: `div` and `span` are not valid children of `ul`. I would not rely on this HTML working cross browser.

Here is the accepted answer: You can make use of the :nth-of-type selector.
$(".timeline li:nth-of-type(2n)")
.add('.timeline li:last')
.after("<div class='clearfix'&gt;</div&gt;");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;</script&gt;
<ul class="timeline"&gt;
<span class="topbullet"&gt;</span&gt;
<li&gt;</li&gt;
<li&gt;</li&gt;
<li&gt;</li&gt;
<li&gt;</li&gt;
<li&gt;</li&gt;
<li&gt;</li&gt;
<li&gt;</li&gt;
<li&gt;</li&gt;
<li&gt;</li&gt;
<li&gt;</li&gt;
</ul&gt;

Here is another answer: You have to add +1 to 2n.
$(".timeline li:nth-child(2n+1)")
$(document).ready(function(){
$(".timeline li:nth-child(2n+1)").add('.timeline li:last').after("<div class='clearfix'&gt;added div</div&gt;");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;</script&gt;
<ul class="timeline"&gt;
<span class="topbullet"&gt;</span&gt;
<li&gt;</li&gt;
<li&gt;</li&gt;
<li&gt;</li&gt;
<li&gt;</li&gt;
<li&gt;</li&gt;
<li&gt;</li&gt;
<li&gt;</li&gt;
<li&gt;</li&gt;
<li&gt;</li&gt;
<li&gt;</li&gt;
</ul&gt;
Comment for this answer: good solution, thanks for your help! But i would prefer the answer of H77.

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 2, 'CommentCount': 3, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2017:00:10/27/17', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<javascript><jquery><css><html>', 'Title': 'Add Element after every second element', 'ViewCount': 1570, 'id': 46971323, 'user_AboutMe': "<p>I'm a 19 year old Webdeveloper from Wörgl, Tyrol, Austria</p>\n", 'user_AccountId': 6881952.0, 'user_DisplayName': 'StaXter', 'user_Reputation': 201.0, 'user_Views': 39.0, 'user_id': 5288399.0}}