title: Using Javascript to create multiple 'div'' tags with specific class name and css style code
body: <p>So this is what I have come up with....</p>
  
  <pre><code>document.body.onload = function addElement() {
    // create a new div element
    let newDiv = document.createElement('div');
    newDiv.className = 'carrierBG';
    newDiv.style.backgroundColor = '#03b7ff';
    newDiv.style.width = '400px';
    newDiv.style.height = '400px';
  
    // add the newly created element and its content into the DOM
    var currentDiv = document.getElementById('div');
    document.body.insertBefore(newDiv, currentDiv);
  };
  </code></pre>
  
  <p>it creates a div tag in my html file...</p>
  
  <pre><code>&lt;div class="carrierBG" style="background-color: rgb(3, 183, 255); width: 400px; height: 400px;"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>How do i replicate this so all of the code is in the same javascript file and I can create additional 'div' tags with different classnames and css style code?</p>