How to insert multiple elements into the middle of the content using JavaScript

<div class="entry-content"> <h2>header0</h2> <h2>header1</h2> <h2>header2</h2> <p>this the paragraph of second header</p> <h2>header3</h2> <h2>header4</h2> <h2>header5</h2> <h2>header6</h2> <h2>header7</h2> <h2>header8</h2> <h2>header9</h2> <h2>header10</h2> </div> <script> var tags=document.getElementsByClassName("entry-content")[0] var hr0=document.createElement("hr");hr0.setAttribute("id","hr0") var hr1=document.createElement("hr");hr1.setAttribute("id","hr1") var TagLength=tags.getElementsByTagName("*").length if(TagLength>2){ tags.insertBefore(hr0, tags.children[Math.round(TagLength/3)]); tags.insertBefore(hr1, tags.children[Math.round(TagLength/3*2+1)]); } </script>