GASのHTMLの中でFor文を回してリストとして表示したい

前提・実現したいこと

Google Apps Script（GAS）で動的なウェブページを作ることを試みています。
その機能は端的に言えば、スプレッドシートのデータを見やすく整形して表示するというものです。

この際、以下のウェブサイトを参考にほぼ同じようなコードを書いてみましたが、うまくいきません。

このサイトです（https://tonari-it.com/gas-web-appli-spreadsheet-append）

発生している問題・エラーメッセージ

TypeError: output.append is not a function

以上のエラーコードが出てしまいます。

該当のソースコード

HTMLファイルのソースコードはこちらです。
ファイル名は"stu_info.html"となっています。

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5　<meta charset="UTF-8">
6　<meta name="viewport" content="width=device-width, initial-scale=1.0">
7　<meta http-equiv="X-UA-Compatible" content="ie=edge">
8　<title>Home Page</title>
9　<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
10　<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
11　<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
12　<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
13</head>
14
15<body>
16
17　<div class="contents-wrapper">
18
19　<div class="main-wrapper">
20　<ul>
21
22　　<?
23　　var ssDataTable = SpreadsheetApp.openById("???").getSheetByName("DataTable");
24
25　　var gradeList = ssDataTable.getRange(1,1,13,1).getValues(); 
26
27　　Logger.log(gradeList)
28
29　　for(var  i=0; i<gradeList.length; i++){
30　　　Logger.log("gradeList[%s][0]:%s",i,gradeList[i][0]);
31　　　output.append("<li>" + gradeList[i][0] + "</li>");
32　　}
33
34　　Logger.log(output.getContent());
35
36　　?>
37
38　</ul>
39　</div>
40　</div>
41
42</body>
43
44</html>
45
46

GASのDoGet関数は以下です。

GAS
1const doGet = (e) => {
2  const page = (e.parameter.p || "stu_info");
3  
4  return htmlOutput = HtmlService.createTemplateFromFile(page)
5  .evaluate()
6  .setTitle("Home Page")
7  .addMetaTag('viewport', 'width=device-width,initial-scale=1');
8};

試したこと

エラーコードにoutput.apppendが関数でないとあったため、ためしにHtmlOutputクラスとしてOutputを定義しました。

公式のドキュメンテーションを参照したところ、output.appendはHtmlOutputクラスの関数であったため、

html
1for(var  i=0; i<gradeList.length; i++){
2　　　Logger.log("gradeList[%s][0]:%s",i,gradeList[i][0]);
3　　　output.append("<li>" + gradeList[i][0] + "</li>");
4　　}

これを以下のように初めにcreateHtmlOutput()しました。

var output = HtmlService.createHtmlOutput("");
for(var  i=0; i<gradeList.length; i++){
　　　Logger.log("gradeList[%s][0]:%s",i,gradeList[i][0]);
　　　output.append("<li>" + gradeList[i][0] + "</li>");
　　}

しかし、問題は解決されず、eval()の中で同じエラーが出現しました。

###試したこと２

返り値を返す必要があるかと思い、Return文を書きましたが、関係なさそうでした。

HTML
1
2<?
3　　var ssDataTable = SpreadsheetApp.openById("???").getSheetByName("DataTable");
4
5　　var gradeList = ssDataTable.getRange(1,1,13,1).getValues(); 
6
7　　Logger.log(gradeList)
8
9　　for(var  i=0; i<gradeList.length; i++){
10　　　Logger.log("gradeList[%s][0]:%s",i,gradeList[i][0]);
11　　　output.append("<li>" + gradeList[i][0] + "</li>");
12　　}
13
14　　Logger.log(output.getContent());
15　　return output
16　　?>

補足情報（FW/ツールのバージョンなど）

Versionは現行です。

大変困っておりますので、もしよろしければ、お分かりの方、よろしくお願いいたします。

行動規範の内容に同意します

回答1件

自己解決

GAS
1const myfunction = () =>{
2　　var ssDataTable = SpreadsheetApp.openById("???").getSheetByName("DataTable");
3
4　　var gradeList = ssDataTable.getRange(1,1,13,1).getValues(); 
5
6　　Logger.log(gradeList)
7
8　　for(var  i=0; i<gradeList.length; i++){
9　　　Logger.log("gradeList[%s][0]:%s",i,gradeList[i][0]);
10　　　output.append("<li>" + gradeList[i][0] + "</li>");
11　　}
12
13　　Logger.log(output.getContent());
14　　return output
15　}