title: Dynamically append Div in HTML JavaScript
body: <p>I have created a div in HTML and want to add inner div dynamically to it. Below is the code for HTML:</p>
  <pre><code>&lt;div id=&quot;table&quot;&gt;
      &lt;div class=&quot;row&quot;&gt;
          This is the Demo First row Content.
          &lt;div class=&quot;cell1&quot;&gt;
              Cell 1 Content
          &lt;/div&gt;
          &lt;div class=&quot;cell2&quot;&gt;
              Cell 2 Content
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;row&quot;&gt;
          This is the Demo Second row Content.
          &lt;div class=&quot;cell1&quot;&gt;
              Cell 1 Content
          &lt;/div&gt;
          &lt;div class=&quot;cell2&quot;&gt;
              Cell 2 Content
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;input type=&quot;button&quot; value=&quot;Add New Row&quot; onclick=&quot;addNewRow()&quot;  /&gt;
  </code></pre>
  <p>My CSS is:</p>
  <pre><code>div {
         border: 1px dotted red;
         padding: 10px;    
      }
  </code></pre>
  <p>And I have done the JavaScript for it but it is not working. The JavaScript is:</p>
  <pre><code>function addNewRow {
      var table = document.getElementById('table');
  
      var rDiv = document.createElement('div');
  
      table.appendChild(rDiv);
  
      rDiv.innerHTML = &quot;This is the Demo Third row Content.&quot;;
  
      var c1Div = document.createElement('div');
      rDiv.appendChild(c1Div);
      c1Div.innerHTML = &quot;Cell 1 Content&quot;;
  
      var c2Div = document.createElement('div');
      rDiv.appendChild(c2Div);
      c2Div.innerHTML = &quot;Cell 2 Content&quot;;
  }
  </code></pre>
  <p>But when I executed it, the new rows are not added. Please guide me what I am missing.</p>