title: javascript add class to an anchor when page loaded
body: <p>I am trying to add a second class to my element
  <br>
  <strong>Before</strong>
  <br></p>
  
  <pre><code>&lt;div class="foo1"&gt;
      &lt;a class="class1" &gt;Text&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><br>
  <strong>After</strong>
  <br></p>
  
  <pre><code>&lt;div class="foo1"&gt;
      &lt;a class="class1 class2" &gt;Text&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><br></p>
  
  <p>here is my javascript code (tried but no success):
  <br></p>
  
  <pre><code>window.onload = function() {
    document.getElementById('class1').className = 'class2';
  };
  </code></pre>
  
  <p><br>
  <strong><em>UPDATE</em></strong>
  actually, all of your answers work, but since this (class1) is a click event, by running the codes it temporarily adds the second class (class2) to the class1 but when page is reloaded , it has disappeared. I need to implement it via a click event by clicking class1. How do I do it?
  <br><br><strong><em>2nd UPDATE</em></strong>
  actually the site users have the ability to change this class, so I am trying to make this happen: that a user changes a class by clicking on class1 and making it "class1 class2"</p>