LANG SELRCT

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

2018年1月20日土曜日

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);
        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/