title: How to create a div using JavaScript?
body: <p>I have the following <code>&lt;div&gt;</code> which I have created using HTML and CSS. I don't want these divs to be created when the page loads, instead I would like them to be created only when a JavaScript function is executed.</p>
  <blockquote>
  <p>I would prefer if they were actually created by the function, if
  possible, rather than being hidden/unhidden</p>
  </blockquote>
  <p>Is there a way I can add this exact HTML code inside the function, or will I need to use JavaScript to create these divs? If I need to use JavaScript would someone be able to explain how?</p>
  <h2>HTML</h2>
  <pre><code>   &lt;div class = 'rowcontainer' id = &quot;r&lt;?php echo $studentid ?&gt;&quot; &gt;
         &lt;div class = 'name'&gt;&lt;t&gt;&lt;?php echo $firstname,&quot; &quot;,$lastname; ?&gt;&lt;/t&gt;&lt;/div&gt;
         &lt;div class = 'ako'&gt;&lt;t&gt;&lt;?php echo $ako; ?&gt;&lt;/t&gt;&lt;/div&gt;
         &lt;div class = 'select'&gt;
              &lt;input type = 'checkbox' class = 'checkbox move'&gt;
         &lt;/div&gt;
     &lt;/div&gt;
  </code></pre>
  <h2>CSS</h2>
  <pre><code>.rowcontainer {
      width: 100%;
      height: 30px;
  }
  
  .name {
      line-height: 30px;
      float: left;
      width: 60%;
      height: 100%;
      padding-left: 15px
  }
  
  .ako {
      line-height: 30px;
      text-align: center;
      float: left;
      width: 20%;
      height: 100%;
  }
  
  .select {
      line-height: 30px;
      text-align: center;
      float: right;
      width: 15%;
      height: 100%;
  }
  
  .checkbox {
      height: 17px;
      width: 17px;
      margin: auto;
      margin-top: 6px;
  }
  </code></pre>
  <p>Thanks for all the answers but unfortunately I cannot seem to get this to work. When I  create a new document with the code below all I get is a blank window and the following error.
  <a href="https://i.stack.imgur.com/TUscM.png" rel="nofollow noreferrer">Error 1 (new page)</a>
  Also when I try and add this code to my existing page I get a similar error, and nothing changes on the page.
  <a href="https://i.stack.imgur.com/KYAjp.png" rel="nofollow noreferrer">Error 2 (existing page)</a>
  What am I missing?</p>
  <pre><code>&lt;body&gt;
      &lt;script&gt;
          let div = document.createElement(&quot;div&quot;);
          div.id = &quot;div_id&quot; ;
          div.className = &quot;div_class&quot;;
          div.style = &quot;background-color: red;&quot;;
          div.style.width = &quot;100px&quot;;
          div.style.height = &quot;100px&quot;;
          document.appendChild(&quot;div&quot;);
      &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>