How to add attribute to child element <a> using JavaScript

Question

I am facing issue in add attribute to child element in my scenario. Attribute is appending in parent instead of child tag . Please help me in JavaScript.

I have below code in html

  <a href="#">
    <div>dummy</div>
  </a>
</div>

My Javascript is:
-----------------
document.getElementsByClassName('Master')[0].setAttribute('aria-label', 'demo');

Output is:
----------
<div class="Master" aria-label="demo">
  <a href="#">
    <div>dummy</div>
  </a>
</div>

Expected output will be:
-------------------------
<div class="Master">
  <a href="#" aria-label="demo">
    <div>dummy</div>
  </a>
</div>```

Tushar Shahi · Accepted Answer · 2021-08-23 09:00:28Z

2

You need to select the specific anchor tag.

document.getElementsByClassName('Master')[0].getElementsByTagName('A')[0].setAttribute('aria-label', 'demo');

Suggest using a class directly in the anchor tag.

answered Aug 23, 2021 at 9:00

Tushar Shahi

21.6k2 gold badges25 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

johny Over a year ago

Thanks @Tushar Shahi!!. Brilliant solution am getting.

Mamun · Accepted Answer · 2021-08-23 09:07:53Z

1

You can directly target the specific element (a) using Document.querySelector() that allows CSS like selector:

document.querySelector('.Master a').setAttribute('aria-label', 'demo');

console.log(document.querySelector('.Master a'));

<div class="Master" aria-label="demo">
  <a href="#">
    <div>dummy</div>
  </a>
</div>

If you have multiple elements then use Document.querySelectorAll() and Array.prototype.forEach():

document.querySelectorAll('.Master a').forEach(function(el){
  el.setAttribute('aria-label', 'demo');
});

edited Aug 23, 2021 at 9:07

answered Aug 23, 2021 at 9:00

Mamun

69k9 gold badges51 silver badges62 bronze badges

1 Comment

johny Over a year ago

Thanks @Mamun.. Exact solution you found for me !

Collectives™ on Stack Overflow

How to add attribute to child element <a> using JavaScript

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related