title: How can I apply an existing CSS class style to a dynamically created div?
body: <p>Apologies for this seemingly redundant question, but the others all seem to be asking about different cases, such as using JQuery. I'm trying to dynamically create a div &amp; apply an existing CSS style to it, but the div isn't taking on the style. Any tips are much appreciated:</p>
  
  <pre><code>    &lt;style&gt;
          div.tile {
              position: absolute;
              overflow: hidden;
              background:  rgba(1,1,0,1);
              width: 400px;
              height: 400px;
          }
          .a { left: 2cm; top: 2cm; z-index: 1; }
          .b { left: 4cm; top: 4cm; z-index: 2; }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;script type="text/javascript"&gt;
  
          createLayer(1);
  
          function createLayer(layerIndex){
              var div = document.createElement('div');
              div.id = "div"+layerIndex;
              div.class = "tile a";
              document.body.appendChild(div);
              var canvas = document.createElement('canvas');
              canvas.id     = "layer" + layerIndex;
              div.appendChild(canvas);
          }
  </code></pre>