Add
after every tag/element with a particular class

Question

Is there any way to insert a break element into my markup after every element with a class 'record'?

Example:

HTML

<div class="block" id="codeBlock">
<div class="record">t1</div>
<div class="record">t2</div>
<div class="tlast">
 <div class="record"></div>
     <div class="record">x1</div>
     <div class="record">x2</div>
 </div>
</div>

JS

document.getElementById('codeBlock')

I have the whole element, now I want to add a break tag after every tag with class 'record' no matter how deep it goes without using jQuery.

Any help would be great.

Thanks

Is there a reason why you cannot do your style related change using css? — Ferrybig, Feb 02 '18 at 09:14

score 2 · Accepted Answer · answered Feb 02 '18 at 09:14

2

Use insertBefore

Array.from( document.querySelectorAll( ".record" ) ).forEach( function(ele){
    ele.parentNode.insertBefore(document.createElement("br"), ele.nextSibling);
});

answered Feb 02 '18 at 09:14

gurvinder372

66,980
10
72
94

score 1 · Answer 2 · answered Feb 02 '18 at 09:25

This can be achieved using Core JavaScript. I would suggest using JQuery for this to look more simple

$(document).ready(function() {

  $('#codeBlock').each(function(e) {
             $( "<br />" ).insertAfter( 'div' );
        });

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block" id="codeBlock">
<div class="record">t1</div>
<div class="record">t2</div>
<div class="tlast">
 <div class="record"></div>
     <div class="record">x1</div>
     <div class="record">x2</div>
 </div>
</div>

Hope this helps!

Add after every tag/element with a particular class

2 Answers2

Add
after every tag/element with a particular class