Как добавить на страницу элемент в определённую позицию?

Question

[sazhyk]

На странице динамически добавляются элементы. Их может быть произвольное количество.

Разметка

<div class="main">
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
</div>

Мне нужно после каждого, например, третьего добавить новый блок, чтобы было так

Разметка с разделителями

<a href="">Add divider</a>
<div class="main">
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="divider"></div> <!--This is divider-->
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="divider"></div> <!--This is divider-->
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
</div>

Но не добавлять его в конце, даже если там нужное количество элементов!

Как это реализовать на jQuery или на JavaScript по щелчку на кнопку?

Answer 1

[kreoTech]

https://jsfiddle.net/kreoTech/4k56o26p/1/

Comments

[sazhyk]

Спасибо

[sazhyk]

Но у вас всё-таки частный случай. Как определить после каждого например 7 элемента?

[sazhyk]

А, всё, разобрался. Ну как вариант ваше решение тоже имеет право на существование.