如何使用 div 内的内容定位 div

Question

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

Answer 1

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>

Answer 2

You can ask javascript to find the elements of the class and then convert the result into an array and find the first element that matches your condition.

 const elements = Array.from(document.getElementsByClassName("test")); const target = elements.find(el => el.innerHTML === 'First Div'); $('<h2>Inserting New Text</h2>').insertAfter(target);

 <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>

Answer 3

No need for jQuery here. Use insertAdjacentHTML to add the new element.

 // Pick up the first element with the test class const el = document.querySelector('.test'); // Use `insertAdjacentHTML` to add the new div after it el.insertAdjacentHTML('afterend', '<div>new text</div>');

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