How to insert a css class via javascript?

I have a particular code and I would need to add a css class only to this code, but via javascript.

Example:

<div class="info-list-item">
 <div class="info-label">A:</div>
 <div class="info-val">abcd</div>
</div>
<div class="info-list-item">
 <div class="info-label">C:</div>
 <div class="info-val">cccc</div>
</div>
<div class="info-list-item">
 <div class="info-label">B:</div>
 <div class="info-val">dcba</div>
</div>

How can I insert an additional class called EXTRA only for a and b via javascript?

Example:

<div class="info-list-item">
 <div class="info-label" class="extra">A:</div>
 <div class="info-val" class="extra">abcd</div>
</div>
<div class="info-list-item">
 <div class="info-label">C:</div>
 <div class="info-val">cccc</div>
</div>
<div class="info-list-item">
 <div class="info-label" class="extra">B:</div>
 <div class="info-val" class="extra">dcba</div>
</div>

Thanks for the help.

Solution

You will need to run over each of them

Assuming A and B are elements where the textContent is either A: or B:

document.querySelectorAll('.info-label').forEach(ele => {
  if (["A:","B:"].includes(ele.textContent.trim())) {
    ele.classList.add('extra');
    ele.nextElementSibling.classList.add('extra');
  }  
});

.extra { color: red;}

<div class="info-list-item">
  <div class="info-label">A:</div>
  <div class="info-val">abcd</div>
</div>
<div class="info-list-item">
  <div class="info-label">C:</div>
  <div class="info-val">cccc</div>
</div>
<div class="info-list-item">
  <div class="info-label">B:</div>
  <div class="info-val">dcba</div>
</div>

Alternative:

document.querySelectorAll('.info-list-item').forEach(container => {
  const children = [...container.children]
  if (["A:","B:"].includes(children[0].textContent.trim())) {
    children.forEach(ele => ele.classList.add('extra'));
  }  
});

.extra { color: red;}

<div class="info-list-item">
  <div class="info-label">A:</div>
  <div class="info-val">abcd</div>
</div>
<div class="info-list-item">
  <div class="info-label">C:</div>
  <div class="info-val">cccc</div>
</div>
<div class="info-list-item">
  <div class="info-label">B:</div>
  <div class="info-val">dcba</div>
</div>