このようにテキストエリアを3つ作成するコードの例です
コード.gs
function doGet(){
return HtmlService.createHtmlOutputFromFile('index');
}
|
意訳この処理は以下を実行する 指定したHTMLファイルを表示する |
index.html
<!DOCTYPE html>
<html>
<body>
<div id="main_div">
</div>
</body>
<script>
create_ta();
function create_ta() {
var main_div = document.getElementById('main_div');
for (var i = 0; i < 3; i++) {
var ta = document.createElement('textarea');
var id = "ta_" + i;
ta.innerHTML = "textarea" + i;
ta.setAttribute("id", id);
ta.setAttribute("name", i);
main_div.appendChild(ta);
}
}
</script>
</html>
|
意訳これはHTML5文書です divを置く（idはmain_div） create_ta()を実行する この処理は以下の処理を実行する idがmain_divの要素を取得する 以下の処理を3回繰り返す textareaを作成する idを決める textareaの中に入力する文字を設定する idを設定して nameを設定して main_divに追加する |
index.htmlにある
for (var i = 0; i < 3; i++) {
の 3 を別の数値変えると作成されるテキストエリアの数が変わります
補足
appendChildではなくinsertAdjacentHTMLを使っても同じことができるようなのでついでに試したコードも残しておきます
.outerHTML を使って
ta = ta.outerHTML;
として
taの中身を↓このようにしてから
<textarea id="ta_0" class="ta" name="0">textarea0</textarea>
insertAdjacentHTMLに渡します
中身を確認するためにconsole.log(ta);も入れておきます
index.html
<html>
<body>
<div id="main">
</div>
</body>
<script>
create_ta();
function create_ta() {
var main = document.getElementById('main');
for (var i = 0; i < 3; i++) {
var ta = document.createElement('textarea');
var id = "ta_" + i;
ta.innerHTML = "textarea" + i;
ta.setAttribute("id", id);
ta.setAttribute("class", "ta");
ta.setAttribute("name", i);
ta = ta.outerHTML;
console.log(ta);
main.insertAdjacentHTML('beforebegin', ta);
}
}
</script>
</html>
|
ウェブアプリケーションとして導入してページを開くと
デベロッパーツールのConsoleにta.outerHTML の中身が表示されます
関連記事
ウェブアプリケーションとして導入する方法がわからない場合
↓この記事にまとめました
Google Apps ScriptのWebアプリ雛形
参考
HTML Service: Create and Serve HTML
https://developers.google.com/apps-script/guides/html/
