このように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/