title: Build HTML with inputs from Google Sheet
body: <p>I'm trying to build a small application that dynamically builds a series of html cards using Materialize CSS based on fields that are present in a google sheet. I've provided a link to the example app, and the example sheet below.</p>
  <p>sheet: <a href="https://docs.google.com/spreadsheets/d/1DD3wqB3IhvReJ5CWVHC-nYAqbphmlzhXYcNzLrgkzUc/edit#gid=0" rel="nofollow noreferrer">https://docs.google.com/spreadsheets/d/1DD3wqB3IhvReJ5CWVHC-nYAqbphmlzhXYcNzLrgkzUc/edit#gid=0</a>
  app:<a href="https://script.google.com/a/macros/ampion.net/s/AKfycbxqxsaUMo_hCUg6qURToC1eTMjhTmQ7EEjwyLJM5XRLzj4q5tI2/exec" rel="nofollow noreferrer">https://script.google.com/a/macros/ampion.net/s/AKfycbxqxsaUMo_hCUg6qURToC1eTMjhTmQ7EEjwyLJM5XRLzj4q5tI2/exec</a></p>
  <p>You should be able to disregard the server side functions <code>doGet</code> <code>readData</code> <code>writeData</code> but I have kept them to ensure example remains functional.</p>
  <p>The client function <code>getData</code> is supposed to place the data coming in from the sheet into the appropriate location in the card. I believe this is where things are breaking down.</p>
  <p>I've included two sections in the HTML body, the first section is <code>&lt;div id=&quot;div&quot;&gt;&lt;/div&gt;&lt;br&gt;&lt;br&gt;</code> and is meant to be where the html is dynamically attached via the <code>id=&quot;div&quot;</code>. The next section is everything that follows below, which is meant to be the card template that I have provided as an example of what I want the cards to look like once they have been built.</p>
  <p>You can see that once the cards are built into the <code>&lt;div id=&quot;div&quot;&gt;&lt;/div&gt;&lt;br&gt;&lt;br&gt;</code>, they lose their formatting and functionality; you can't click on the card to reveal the contents, the layout is broken, and there's a <code>NaN</code> error.</p>
  <p>I have attempted to provide only the code required to fully present the problem and provide you with a functional example to work from. I think you will find that the code has already been minimized.</p>
  <p>Thank you so much for your help!</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-js lang-js prettyprint-override"><code>function doGet() {
    return HtmlService.createHtmlOutputFromFile('index');
  }
    
    var spreadsheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Sheet1');
    
    function readData() {
      var range = spreadsheet.getRange(1, 1,spreadsheet.getLastRow(), spreadsheet.getLastColumn()).getValues();
      Logger.log(range);
      return range;
  };
    
    
    function writeData(sendvalue) {
      spreadsheet.getRange(spreadsheet.getLastRow()+1, 1).activate();
      spreadsheet.getRange(spreadsheet.getLastRow()+1, 1).setValue(sendvalue);
  
  };</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
            &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"&gt;
        &lt;!-- Compiled and minified JavaScript --&gt;
        &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"&gt;&lt;/script&gt;
        &lt;!--Import Google Icon Font--&gt;
        &lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"&gt;
        &lt;!--Import materialize.css--&gt;
        &lt;link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/&gt;
        &lt;!--Let browser know website is optimized for mobile--&gt;
        &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"/&gt;
      &lt;base target="_top"&gt;
    &lt;/head&gt;
    &lt;body&gt;
      
      &lt;div id="div"&gt;&lt;/div&gt;&lt;br&gt;&lt;br&gt;
      
           &lt;div class="activator main"&gt;
           &lt;div class="activator card blue-grey darken-1" &gt;
              &lt;div class="activator card-image waves-effect waves-block waves-light"&gt;
              &lt;/div&gt;
              &lt;div class="card-content"&gt;
                 &lt;span class="activator card-title deep-orange-text text-lighten-1"&gt;Information Security&lt;i class="material-icons right"&gt;more_vert&lt;/i&gt;&lt;/span&gt;
                 &lt;p class="activator deep-orange-text text-lighten-1" &gt;Learn about the secuirty posture of our business, learn how to be a human firewall, request access on a new system, draw attention to a potential security threat.&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="card-reveal"&gt;
                 &lt;span class="card-title grey-text text-darken-4"&gt;&lt;i class="material-icons right"&gt;close&lt;/i&gt;&lt;/span&gt;
                 &lt;span class="card-title activator deep-orange-text text-lighten-1"&gt;Information Security&lt;i class="material-icons right"&gt;more_vert&lt;/i&gt;&lt;/span&gt;
              &lt;/div&gt;
           &lt;/div&gt;
        &lt;/div&gt;
          
      &lt;script&gt;
      function getData(values) {
      values.forEach(function(item, index) {
      var x = document.getElementById("div");
      x.innerHTML += '&lt;div class="activator main"&gt;'+
           '&lt;div class="activator card blue-grey darken-1"&gt;'+
              +'&lt;div class="activator card-image waves-effect waves-block waves-light"&gt;'
              +'&lt;/div&gt;'+
              '&lt;div class="card-content"&gt;'+
                '&lt;span class="activator card-title deep-orange-text text-lighten-1"&gt;' + item[0] + '&lt;i class="material-icons right"&gt;more_vert&lt;/i&gt;&lt;/span&gt;'+'&lt;p class="activator deep-orange-text text-lighten-1"&gt;'+item[1]+'&lt;/p&gt;'+'&lt;/div&gt;'+'&lt;div class="card-reveal"&gt;'+'&lt;span class="card-title grey-text text-darken-4"&gt;&lt;i class="material-icons right"&gt;close&lt;/i&gt;&lt;/span&gt;'+'&lt;span class="card-title activator deep-orange-text text-lighten-1"&gt;'+item[0]+'&lt;i class="material-icons right"&gt;more_vert&lt;/i&gt;&lt;/span&gt;'+'&lt;/div&gt;'+'&lt;/div&gt;'+'&lt;/div&gt;';
      });
      }
      
      google.script.run.withSuccessHandler(getData).readData();
      
      
      &lt;/script&gt;
      &lt;script type="text/javascript" src="js/materialize.min.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>