Apps Scriptリファレンス: Apps Script Reference |障害・課題追跡: IssueTracker |Google Workspace: Status Dashboard - Summary

2018年3月7日水曜日

HTML要素を動的に作りたい(div)

JavaScriptでdivを動的に作る


このようにdivを3つ作成するコードの例です




コード.gs
function 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);
      }
    }

    function create_div(i) {
      var main_div = document.getElementById('main_div');
      var div = document.createElement('div');
      div.setAttribute("id", "div" + i);
      div.textContent = "div";
      main_div.appendChild(div);
    }
  </script>
</body>
</html>
意訳
 


divを入れるdivを用意する


HTMLドキュメントの読み込みが完了したらcreate_elementsを実行する

この機能がやること
以下の処理を3回繰り返す
create_div()にiを渡して実行する



この機能がやること
idがmain_divの要素を取得する
新しくdiv要素を作成する
idを設定する
テキストを設定する
main_divに追加する






関連記事

ウェブアプリケーションとして導入する方法がわからない場合
↓この記事にまとめました
HTMLでページを作る



参考

HTML Service: Create and Serve HTML
https://developers.google.com/apps-script/guides/html/

Latest post

Google Apps Scriptの障害時はIssueTrackerを見てみる - Incidents for Apps Script are reported on Issue Tracker

IssueTracker > Apps Script issues https://issuetracker.google.com/savedsearches/566234 Google Apps Scriptの障害時は IssueTracker に課題が上がっていることが...