How to target a div using content inside the div-CodePudding

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

CodePudding user response：

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>

CodePudding user response：

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>

CodePudding user response：

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 >First Div</div>
<div >Second Div</div>