If you're only targeting modern browsers:

Use element.classList.add to add a class:

element.classList.add("my-class");

And element.classList.remove to remove a class:

element.classList.remove("my-class");

If you need to support Internet Explorer 9 or lower:

Add a space plus the name of your new class to the className property of the element. First, put an id on the element so you can easily get a reference.

<div id="div1" class="someclass">
    <img ... id="image1" name="image1" />
</div>

Then

var d = document.getElementById("div1");
d.className += " otherclass";

Note the space before otherclass. It's important to include the space otherwise it compromises existing classes that come before it in the class list.

See also element.className on MDN.

find your target element "d" however you wish and then:

d.className += ' additionalClass'; //note the space

you can wrap that in cleverer ways to check pre-existence, and check for space requirements etc..

When the work I'm doing doesn't warrant using a library, I use these two functions:

function addClass( classname, element ) {
    var cn = element.className;
    //test for existance
    if( cn.indexOf( classname ) != -1 ) {
        return;
    }
    //add a space if the element already has class
    if( cn != '' ) {
        classname = ' '+classname;
    }
    element.className = cn+classname;
}

function removeClass( classname, element ) {
    var cn = element.className;
    var rxp = new RegExp( "\\s?\\b"+classname+"\\b", "g" );
    cn = cn.replace( rxp, '' );
    element.className = cn;
}

Assuming you're doing more than just adding this one class (eg, you've got asynchronous requests and so on going on as well), I'd recommend a library like Prototype or jQuery.

This will make just about everything you'll need to do (including this) very simple.

So let's say you've got jQuery on your page now, you could use code like this to add a class name to an element (on load, in this case):

$(document).ready( function() {
  $('#div1').addClass( 'some_other_class' );
} );

Check out the jQuery API browser for other stuff.

document.getElementById('some_id').className+='  someclassname'

OR:

document.getElementById('some_id').classList.add('someclassname')

First approach helped in adding the class when second approach didn't work.
Don't forget to keep a space in front of the ' someclassname' in the first approach.

For removal you can use:

document.getElementById('some_id').classList.remove('someclassname')

2 different ways to add class using JavaScript

JavaScript provides 2 different ways by which you can add classes to HTML elements:

1. Using element.classList.add() Method
2. Using className property

Using both methods you can add single or multiple classes at once.

1. Using element.classList.add() Method

var element = document.querySelector('.box');
// using add method
// adding single class
element.classList.add('color');

// adding multiple class
element.classList.add('border', 'shadow');

.box {
    width: 200px;
    height: 100px;
}
.color {
    background: skyblue;
}
.border {
    border: 2px solid black;
}
.shadow {
    box-shadow: 5px 5px 5px gray;
}

<div class="box">My Box</div>

2. Using element.className Property

Note: Always use += operator and add a space before class name to add class with classList method.

var element = document.querySelector('.box');
// using className Property
// adding single class
element.className += ' color';

// adding multiple class
element.className += ' border shadow';

.box {
    width: 200px;
    height: 100px;
}
.color {
    background: skyblue;
}
.border {
    border: 2px solid black;
}
.shadow {
    box-shadow: 5px 5px 5px gray;
}

<div class="box">My Box</div>

You can use modern approach similar to jQuery

If you need to change only one element, first one that JS will find in DOM, you can use this:

document.querySelector('.someclass').className += " red";

.red {
  color: red;
}

<div class="someclass">
  <p>This method will add class "red" only to first element in DOM</p>
</div>

<div class="someclass">
  <p>lorem ipsum</p>
</div>

<div class="someclass">
  <p>lorem ipsum</p>
</div>

<div class="someclass">
  <p>lorem ipsum</p>
</div>

Keep in mind to leave one space before class name.

If you have multiple classes where you want to add new class, you can use it like this

document.querySelectorAll('.someclass').forEach(function(element) {
  element.className += " red";
});

.red {
  color: red;
}

<div class="someclass">
  <p>This method will add class "red" to all elements in DOM that have "someclass" class.</p>
</div>

<div class="someclass">
  <p>lorem ipsum</p>
</div>

<div class="someclass">
  <p>lorem ipsum</p>
</div>

<div class="someclass">
  <p>lorem ipsum</p>
</div>

Just to elaborate on what others have said, multiple CSS classes are combined in a single string, delimited by spaces. Thus, if you wanted to hard-code it, it would simply look like this:

<div class="someClass otherClass yetAnotherClass">
      <img ... id="image1" name="image1" />
</div>

From there you can easily derive the javascript necessary to add a new class... just append a space followed by the new class to the element's className property. Knowing this, you can also write a function to remove a class later should the need arise.

Shortest

image1.parentNode.className+=' box';

image1.parentNode.className+=' box';

.box { width: 100px; height:100px; background: red; }

<div class="someclass">
    <img ... id="image1" name="image1" />
</div>

This might be helpful for WordPress developers etc.

document.querySelector('[data-section="section-hb-button-1"] .ast-custom-button').classList.add('TryMyClass');

first, give the div an id. Then, call function appendClass:

<script language="javascript">
  function appendClass(elementId, classToAppend){
    var oldClass = document.getElementById(elementId).getAttribute("class");
    if (oldClass.indexOf(classToAdd) == -1)
    {
      document.getElementById(elementId).setAttribute("class", classToAppend);
    }
}
</script>

In my case, I had more than one class called main-wrapper in the DOM, but I only wanted to affect the parent main-wrapper. Using :first Selector (https://api.jquery.com/first-selector/), I could select the first matched DOM element. This was the solution for me:

$(document).ready( function() {
    $('.main-wrapper:first').addClass('homepage-redesign');
    $('#deals-index > div:eq(0) > div:eq(1)').addClass('doubleheaderredesign');
} );

I also did the same thing for the second children of a specific div in my DOM as you can see in the code where I used $('#deals-index > div:eq(0) > div:eq(1)').addClass('doubleheaderredesign');.

NOTE: I used jQuery as you can see.

In YUI, if you include yuidom, you can use

YAHOO.util.Dom.addClass('div1','className');

HTH