title: Create complex table body structure using Javascript
body: <p>Could anybody tell me how I can create this table using my function below?</p>
  <pre><code>&lt;tbody&gt;
   &lt;tr&gt;
    &lt;td&gt;&lt;h3&gt;Main1&lt;/h3&gt;&lt;/td&gt;
    &lt;td&gt;
      &lt;h5&gt;
        text1
      &lt;/h5&gt;
    &lt;/td&gt;
    &lt;td&gt;
      &lt;h5&gt;
       text2
      &lt;/h5&gt;
    &lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr&gt;
     &lt;td&gt;&lt;h3&gt;Main2&lt;/h3&gt;&lt;/td&gt;
     &lt;td&gt;
      &lt;h5&gt;
        text3
      &lt;/h5&gt;
     &lt;/td&gt;
     &lt;td&gt;
      &lt;h5&gt;
        text4
      &lt;/h5&gt;
     &lt;/td&gt;
   &lt;/tr&gt;
  &lt;/tbody&gt;
  </code></pre>
  <p>Here are my data and my functions. I can only create a table without the inner <code>h3, h5 tags</code> with it.</p>
  <pre><code>data =[['Main1', 'text1', 'text2'],['Main2', 'text3', 'text4']]
  
    var table = document.getElementsByTagName(&quot;tbody&quot;)[0];
        table.innerHTML = &quot;&quot;; 
        for (var i = 0; i &lt; data.length; i++) {
          var child = data[i];
          var row = table.insertRow();
          Object.keys(child).forEach(function (k) {
            var cell = row.insertCell();
            cell.appendChild(document.createTextNode(child[k]));
  </code></pre>