CODEWITHSUNDEEP
javascriptjqueryinsertafter
Vishwanath Ezhil
Vishwanath Ezhil

Reputation: 69

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

Upvotes: 0

Views: 1540

Answers (3)

Andy
Andy

Reputation: 63514

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>

Upvotes: 1

Abir Taheer
Abir Taheer

Reputation: 2783

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>

Upvotes: 1

gru
gru

Reputation: 3069

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>

Upvotes: 1

Related Questions