How to target a div using content inside the div

I have 2 divs with same class name but different strings inside the div. I want to use an insertAfter the first div to display some additional text, but the text is being displayed under both divs:

<div class='test'>First Div</div>
<div class='test'>Second Div</div >

My approach:

if(document.getElementsByClassName('test')[0] && document.getElementsByClassName('test')[0].inner
HTML == 'First Div') {
          $('<h2>Inserting New Text</h2>').insertAfter('.test')[0];
                     }

But this adds the text after both the First Div and the Second Div. I want to know if there is a way to insert only once or insert after matching the string