LANG SELRCT

Apps Script Reference  (Create: Create new Spreadsheet | Create new Apps Script

Wednesday, March 7, 2018

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

スプレッドシートA列にある複数のテキストをスライドに追加したい(Google Apps Script)

今回Google Apps Scriptでやりたいこと GoogleスプレッドシートA列にある複数の値を取得して Googleスライドに渡して 図形オブジェクトのテキストとして追加したい ① スプレッドシートのA列に値を入れておく ② Code.gsのinsertNewShape...