Add class to html element using javascript

Question

I have the following script:

<script>
  document.getElementById('myId').classList.add('myClass');
</script>

How to alter it and add myClass into #myId a element? I have single anchor element there:

<div id="myId">
    <a href="#" title="link">Add class to me</a>
</div>

http://stackoverflow.com/questions/11444640/add-a-class-to-a-div-with-javascript — Tommy Jinks, Apr 16 '15 at 10:25
possible duplicate of [How do I add a class to a given element?](http://stackoverflow.com/questions/507138/how-do-i-add-a-class-to-a-given-element) — Andriy Budzinskyy, Apr 16 '15 at 10:25
Is there only a single `a` element inside `#myId`? Or are there multiple? Do you want to add the class to all of them? — Felix Kling, Apr 16 '15 at 10:30
unless you're using jQuery (or any other third party library that supports such bindings), you most likely are forced to iterate through all the elements of your myId dom element, unless you only have a single element in your myId. — briosheje, Apr 16 '15 at 10:34

MrVentzi · Accepted Answer · 2015-04-16T10:37:48.660

3

According to your question, you want to target the anchor tag and set the class there, so:

var parent = document.getElementById('one');
var anchor = parent.getElementsByTagName("A")[0];
anchor.classList.add('myClass');

That should do it.

If you have multiple anchor tags you can loop through them.

var parent = document.getElementById('one');
var anchorList = parent.getElementsByTagName("A");

for(i = 0; i < anchorList.length; i++) {
    anchorList[i].classList.add('myClass');
}

edited Apr 16 '15 at 10:37

answered Apr 16 '15 at 10:30

MrVentzi

639
3
13

That's it, but it's still unclear whether the OP has a single or multiple `a` elements. – Felix Kling Apr 16 '15 at 10:32
1

@MrVentzi +1 Good Answer..Probably You should add Browser Compatibility https://developer.mozilla.org/en-US/docs/Web/API/Element/classList#Browser_compatibility in your answer as well – Sachin Jain Apr 16 '15 at 10:39
In case of a single element, this is a bit shorter: `document.querySelector('#one a').classList.add(...)` – Felix Kling Apr 16 '15 at 10:42

score -1 · Answer 2 · answered Apr 16 '15 at 10:26

-1

to add class name you use

document.getElementById('myId').className="Your class name";

answered Apr 16 '15 at 10:26

1

That doesn't seem to target the OP's issue at all. – Felix Kling Apr 16 '15 at 10:31
This targets the wrong element and overwrites any classes already set. – Peter Herdenborg Apr 16 '15 at 11:30

Add class to html element using javascript

2 Answers2