Question

I have a div with heading text like this:

<div class="vehicleCntr" id="vehicles">
    <div class="header">
        <h3 id="name"> Trucks </H3>
    </div>

The text in the heading H3 can take only 2 values: trucks or Cars. There will never be another value apart from these two. On click of cars hyperlink the heading has to change to ‘Cars’ and on click on trucks hyperlink the heading has to change to ‘Trucks’.

Should I just remove the text of h3 and replace it everytime it is clicked or should I have 2 H3s like below and toggle the visibility:

 <div class="header">
        <h3 id="trucks"> Trucks </H3>
        <h3 id="cars"> Cars</H3>
    </div>

I am considering the performance benefits if any between these 2 methods. Since I assume it involves repaint and/OR reflow.

Answer 1

A re-flow occurs each time, so I don’t think there is much difference between the two. I would choose the second however since I wouldn’t always have to add / remove new stuff in the DOM.