HTML list from data stored in Google Spreadsheet for Apps Script website/webapp - Templated HTML
<p>My Google Apps Script web app I'm trying to make has a button that the user clicks and adds their name to. I'm trying to have that information save as a list on the website so that if I refresh the page it's still there and if someone else is accessing the website, it will still be there.</p>

<p>This is the add button - <a href="https://snag.gy/EOgx5T.jpg" rel="nofollow noreferrer">https://snag.gy/EOgx5T.jpg</a><br>
These are example names added from the button- <a href="https://snag.gy/8GtX3Y.jpg" rel="nofollow noreferrer">https://snag.gy/8GtX3Y.jpg</a></p>

<p>I don't want to save it as local storage. Is there a way to save the information to a Google Spreadsheet and use that spreadsheet as a database or something?</p>

index.html

<pre><code>&lt;div id="artistTabs"&gt;
   &lt;ul id="artistList"&gt;
     &lt;li&gt;&lt;a onClick="addArtist(); return false;" href=""&gt;+&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

js.html

<pre><code>function addArtist()
{
   console.log("add artist here");
   var artistName = prompt("enter artist whole first name and initial of last name");
    if (artistName === "") //user pressed 'ok' but input field was empty
    {
        return;
    }
    else if (artistName != "" &amp;&amp; artistName !== null) //user inputs something and hits 'ok'
    {
         var ul = document.getElementById("artistList");
         var li = document.createElement("li");
         var a = document.createElement("a");
         a.setAttribute("href", "#");
         a.textContent = artistName;
         li.appendChild(a);
         ul.appendChild(li);   
         li.onclick = function()
         {
            test(); return false;
         };
   }
   else //user hits 'cancel' or 'x' 
   {
        return;
   }
}

function test()
{
    console.log("test");
}
</code></pre>

<p>Do I need to add something to the Google Apps Script 'xxx.gs' or 'xxx.js' file to save the information/access a database/something?</p>

<h3>Edit</h3>

<p>I've updated some of the code. I can write the artist to the spreadsheet and i can get the artist name back from the spreadsheet. I'm still confused on how to display a new item in the list as templated html.</p>

index.html

<pre><code>&lt;div id="artistTabs"&gt;
    &lt;ul id="artistList"&gt;
        &lt;li&gt;&lt;a onClick="addArtist(); return false;" href=""&gt;+&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

js.html

<pre><code>function addArtist()
{
  var artistName = prompt("enter artist whole first name and initial of last name");

  if (artistName === "") //user pressed 'ok' but input field was empty
  {
    return;
  }
  else if (artistName != "" &amp;&amp; artistName !== null) //user inputs something and hits 'ok'
  {
    google.script.run
      .withSuccessHandler(writeSuccess(artistName))
      .withFailureHandler(writeFailure)
      .writeArtistName(artistName);
  }
  else //user hits 'cancel' or 'x'
  {
    return;
  }
}

function writeSuccess(artistName)
{
  console.log("write success: " + artistName);
}

function writeFailure()
{
  console.log("write failure - email myself why it failed and the time it failed");
} 
</code></pre>

code.gs

<pre><code>var ss = SpreadsheetApp.openById('id');
var sheet = ss.getSheets()[0];

function doGet()
{
  return HtmlService.createTemplateFromFile('index').evaluate();
}

function getContent(filename)
{
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

function writeArtistName(artistName)
{
  var lastRow = sheet.getLastRow() + 1; //gets next unused row
  var column = 1; //first column
  var lastCell = sheet.getRange(lastRow, column);

  lastCell.setValue(artistName); //sets next blank row as artistName
}

function getArtistName()
{
  var lastRow = sheet.getLastRow(); //gets last row with content
  var column = 1;

  var lastArtist = sheet.getRange(lastRow, column).getValue(); //gets last row with artistName

  Logger.log(lastArtist);

  var x = '&lt;li&gt;&lt;a onClick="test(); return false;" href="#"&gt;';
  var y = lastArtist;
  var z = '&lt;/a&gt;&lt;/li&gt;';

  var xyz = x + y + z;

  Logger.log(xyz);
}
</code></pre>

<p>How do I call the <code>getArtistName()</code> function in the code.gs file, set the artist name as a list item in my unordered list, and display it on the website as an html template? i cant call <code>document.getElementById</code> in the .gs file because it says <code>ReferenceError: "document" is not defined</code>.</p>

<p>i need the list to stay on the website even if i reload the page and it needs to be accessible to anyone from anywhere</p>