LANG SELRCT

コードを書く場所についてはこちら

2017年12月10日日曜日

HTML要素を動的に作りたい(テキストエリア)

JavaScriptでテキストエリアを動的に作る


このようにテキストエリアを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/