The situation is as follows:

<section class="row_clear"> <div></div> <div></div> <div></div> <div></div> </section>

A special block must be inserted into the existing structure between the second and third div.

 <div class="clearfix hidden-lg"></div>

That so turned out:

 <section class="row_clear"> <div></div> <div></div> <div class="clearfix hidden-lg"></div> <div></div> <div></div> </section>

It seems to be nothing complicated, here's the code

  var div = document.createElement('div'); div.className = "clearfix hidden-lg"; row_clear.insertBefore(div, row_clear.children[2]);

But then there was a problem, like "row" blocks on the page can be from 10 and more. And with the help of 'cloneNode' I don’t want to implement it, since the code will be huge, and for each new 'row' I’ll have to create a new variable ...

Help solve this problem ... I can’t find the right answer anywhere ...

    1 answer 1

    Using querySelectorAll, select the whole section with the row_clear class and perform a insertBefore in a loop

     var x = document.querySelectorAll(".row_clear"); for (var i = 0; i < x.length; i++) { var div = document.createElement('div'); div.className = "clearfix hidden-lg"; x[i].insertBefore(div, x[i].children[2]); } 
     .row_clear { border: 1px solid red; padding: 5px; } .row_clear div { border: 1px solid green; padding: 5px; } .hidden-lg { padding: 5px; background: blue; } 
     <section class="row_clear"> <div></div> <div></div> <div></div> <div></div> </section> <hr> <section class="row_clear"> <div></div> <div></div> <div></div> <div></div> </section> <hr> <section class="row_clear"> <div></div> <div></div> <div></div> <div></div> </section>

    • Thank you I'm just new to java, just learning) - Hochru
    • one
      @Hochru java! = Javascript :) Successful training) - Alexander Igorevich