title: How to create, table cell with innerHTML value / textnode via loop of array
body: <p>I have tried to run a Javascript loop to create a table with values in it from an array:
  I appended the text-node and tried that the text node will be the array values, one per td for the length.
  This is my code so far, it will only create one cell with "undefined" value:</p>
  
  <pre><code>function addtd(){
        var table1 = document.getElementsByTagName('table')[0];
        var rowrow =  document.createElement('tr');
        var foods = new Array();
  
        foods[0] = "milk" ;`enter code here`
        foods[1] = "meat" ;
        foods[2] = "fruit" ;
        foods[3] = "fish" ;
        foods[4] = "salad" ;
  
        for ( var i=0;i&lt;foods.length;i++)
  
        var cell1  =  document.createElement('td').innerHTML = 'foods[i]';    
        var text1 = document.createTextNode(foods[i]) ;
  
        cell1.appendChild(text1);
        rowrow.appendChild(cell1);
        table1.appendChild(rowrow);
        }
  
         &lt;div id="divfood"&gt; &lt;/div&gt;
         &lt;button onclick="addtd()"&gt;Click me&lt;/button&gt;`enter code here`
         &lt;table border="2" id="tabletable" cellspacing="5" &gt;
         &lt;/table&gt;   
  </code></pre>