How to add an element to a page at a specific position?

Question

JavaScript

Elements are dynamically added to the page. There can be any number of them.

markup

<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>

I need to add a new block after each, for example, the third, so that it is like this

Delimited markup

<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>

But do not add it at the end , even if there are the right number of elements!

How can I implement this in jQuery or JavaScript on button click?

Answer 1

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