title: Adding html table to javascript using document.write
body: <p>Looking for some help here.  Our class instructor is asking us to add a table into javascript using the document.write, I know this is not the recommended way to do this, but this is what our instructor is looking for:
  Add code to the writeIt function that writes the opening table tag before iterating thru the heros and villians and then the closing table tag.  Then modify the makeListItem to return a string in the form of tr td Hero td td Villan /td /tr.</p>
  
  <p>I tried this but am getting a blank html page when try to view.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;JavaScript Functions&lt;/title&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;script&gt;
        var superData = {"Super Man":["Lex Luther"],
                         "Bat Man":["Joker", "Riddler",],
                         "Spider Man":["Green Goblin", 
                                       "Vulture", "Carnage"],
                         "Thor":["Loki", "Frost Giants"]};
        function writeIt('&lt;table&gt;'){
          for (hero in superData){
            var villains = superData[hero];
            for (villainIdx in villains){
              var villain = villains[villainIdx];
              var listItem = makeListItem(&lt;tr&gt;&lt;td&gt;Hero&lt;/td&gt;&lt;td&gt;Villan&lt;/td&gt;&lt;/tr&gt;);
              document.write(listItem);
            }
          }
        }
        function makeListItem(name, value){
          var itemStr = "&lt;li&gt;" + name + ":&amp;nbsp;" + value + "&lt;/li&gt;";
          return itemStr;
        }
          document.write('&lt;/table&gt;');
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body onload="writeIt()"&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>