このようにdivを3つ作成してその中にテキストエリアとボタンも作成するコードの例です
コード.gsfunction doGet(){
return HtmlService.createHtmlOutputFromFile('index');
}
| 意訳この処理は以下を実行する 指定したHTMLファイルを表示する |
index.html<!DOCTYPE html>
<html>
<body>
<div id="main_div">
</div>
<script>
document.addEventListener('DOMContentLoaded', create_elements);
function create_elements() {
for (var i = 0; i < 3; i++) {
var div = create_div(i);
create_ta(div, i);
create_bt(div, i);
}
}
function create_div(i) {
var main_div = document.getElementById('main_div');
var div = document.createElement('div');
div.setAttribute("id", "div" + i);
main_div.appendChild(div);
return div;
}
function create_ta(div, i) {
var ta = document.createElement('textarea');
ta.textContent = "textarea" + i;
ta.setAttribute("id", "ta" + i);
div.appendChild(ta);
}
function create_bt(div, i) {
var bt = document.createElement('button');
bt.textContent = "button" + i;
bt.setAttribute("id", "bt" + i);
div.appendChild(bt);
}
</script>
</body>
</html>
| 意訳これはHTML5文書です divを置く（idはmain_div） HTMLドキュメントの読み込みが完了したらcreate_divを実行する この機能がやること 以下の処理を3回繰り返す create_div に i を渡して create_ta に div と i を渡して create_bt に div と i を渡す この機能がやること idがmain_divの要素を取得して div要素を作成して idを設定して main_divに追加して divを返す この機能がやること テキストエリアの要素を作成して テキストを設定して idを設定して divに追加する この機能がやること ボタン要素を作成して ボタンのテキストを設定して idを設定して divに追加する |
関連記事
ウェブアプリケーションとして導入する方法がわからない場合
↓この記事にまとめました
HTMLでページを作る
参考
HTML Service: Create and Serve HTML
https://developers.google.com/apps-script/guides/html/
