0

I've the following HTML:

<li class="treeview" id="account_management">

So I want to target the element with id "account_management" and change it's class from "treeview" to "treeview active", so that I can then style my tree menu accordingly.

T J
  • 42,762
  • 13
  • 83
  • 138
twigg
  • 3,753
  • 13
  • 54
  • 96
  • 2
    It's well worth your time to spend an hour or two reading through [the jQuery API documentation](http://api.jquery.com). It really only takes that long, and it answers this question and hundreds more. – T.J. Crowder Oct 02 '14 at 08:35
  • thanks @T.J.Crowder surely you can answer every single question on this site by saying read the docs? Not really helpful. I don't have any intention of learning jQuery at this moment in time as I don't really have any need for it other than this right now. There's no point in my writing poor code if someone who knows the mechanics of the language that is will to spend a minute to help me – twigg Oct 02 '14 at 08:39
  • 1
    The point is that if you will learn the very basic jQuery things, it will save your and other people time. Noone said that you should learn it completely. – Regent Oct 02 '14 at 08:45
  • 1
    @twigg: It wasn't an answer. It was a suggestion to help save your time and others'. And no, reading the API docs *doesn't* answer every question. Some questions are bigger than API calls. Some are actually about hard things. This is *trivial*, and a trivial glance at the API docs would show you this tempting `addClass` function. – T.J. Crowder Oct 02 '14 at 08:46
  • 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) – Philipp M Oct 02 '14 at 08:47
  • @PhilippM: No, because that question doesn't reference jQuery. – T.J. Crowder Oct 02 '14 at 08:48
  • 1
    @T.J.Crowder If the OP isn't interested in learning, next time suggest [Google](https://www.google.com/search?q=how+to+add+a+class+using+jquery&oq=how+to+add+a+class+using+jquery&aqs=chrome..69i57.7084j0j7&sourceid=chrome&es_sm=122&ie=UTF-8) ;) – T J Oct 02 '14 at 08:59

2 Answers2

5

You can use jQuery addClass() to add the class active: 

$("#account_management").addClass("active");

Or you can use Element.classList DOM API's add() method like:

document.getElementById("account_management").classList.add("active");

classList browser support @caniuse

for older versions, see this answer.

Community
  • 1
  • 1
T J
  • 42,762
  • 13
  • 83
  • 138
  • Yes, it is always sad when big work stays even without "accepted". By the way, mentioned answer was posted after 2.5 months - it was probably too late, even though it works correctly :) – Regent Oct 02 '14 at 08:49
1

In pure JavaScript you could do:

var d = document.getElementById("account_management");
d.className = d.className + " active";

If you already use jQuery in your project, I would recommend to make use of it like in T J's answer.

Philipp M
  • 1,877
  • 7
  • 27
  • 38
  • Using jQuery or not using jQuery has no relation to the language you're using (JavaScript). You mean "Using the DOM you could do:" – T.J. Crowder Oct 02 '14 at 08:48
  • I know that jQuery is also JavaScript. By `pure JavaScript` I meant, without a framework. – Philipp M Oct 02 '14 at 08:49
  • @Regent: It's just this horrible, and anti-constructive, meme that somehow jQuery is something other than JavaScript. Again, `$("#account_management").addClass("active")` ***is*** "pure JavaScript" (using jQuery). The alternative above is pure JavaScript (using the DOM). Nothing whatsoever to do with the language. – T.J. Crowder Oct 02 '14 at 08:51
  • @T.J.Crowder well, the idea is that "pure JS" is "using JS without additional libraries/plugins". It's just the way how you interpret word "pure". – Regent Oct 02 '14 at 08:54
  • @Regent: No, it's the way you interpret the word *JavaScript*, which has no place in that term. Pure DOM is what people actually mean. I'll stop banging on about it. :-) – T.J. Crowder Oct 02 '14 at 08:58
  • @T.J.Crowder you mean that [document.getElementById()](https://developer.mozilla.org/en-US/docs/Web/API/document.getElementById) is DOM document's method (not JavaScript method), which returns DOM [Element](https://developer.mozilla.org/en-US/docs/DOM/element)? – Regent Oct 02 '14 at 09:11