javascriptjqueryinsertafter

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].innerHTML == '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

Solution

  • Just keep it simple, find all elements with target class and pick the first one:

    const el = document.getElementsByClassName('test')
$('<div>new text</div>').insertAfter(el[0])
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='test'>First Div</div>
<div class='test'>Second Div</div>