LANG SELRCT

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

2018年3月29日木曜日

Node.insertBefore()で要素を追加する


Node.insertBefore を使って
指定した要素の前後に要素を追加するコードを書きました


このdiv要素を基準に追加する



指定する要素は3つ
  • 親要素
  • 挿入する要素
  • どの要素の前に挿入するか
親要素.insertBefore(挿入する要素, この要素の前に)



コード.gs
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する




index.html
<!DOCTYPE html>
<html>
  <body>
  <div id="main">
    <div id="sub">このdiv要素を基準に追加する</div>
    <button id="before">before</button>
    <button id="after">after</button>
  </div>
    <script>
    var main = document.getElementById("main");
    var sub = document.getElementById("sub");
    var before = document.getElementById("before");
    var after = document.getElementById("after");
    var before_num = 0;
    var after_num = 0;
    
    before.onclick = before_clicked;
    after.onclick = after_clicked;
    
    function before_clicked(){
      before_num ++;
      var div = document.createElement("div");
      div.textContent = "前に追加" + before_num;
      main.insertBefore(div, sub);
    }
    
    function after_clicked(){
      after_num ++;
      var div = document.createElement("div");
      div.textContent = "後ろに追加" + after_num;
      main.insertBefore(div, sub.nextSibling); 
    }
    </script>
  </body>
</html>
意訳
 


main_divのdiv
sub_divのdiv
前に追加するボタン
後ろに追加するボタン


idがmain_divの要素を取得
idがsub_divの要素を取得
idがbeforeの要素を取得
idがafterの要素を取得
before_numの初期値を0
after_numの初期値を0

beforeがクリックされたらbefore_clickedを実行する
afterがクリックされたらafter_clickedを実行する

この機能がやること
before_numに1足す
div要素を作る
その要素のテキストは"前に追加" + before_num
main_divの要素のsub要素の前にdivを挿入する


この機能がやること
after_numに1足す
div要素を作る
その要素のテキストは"前に追加" + after_num
main_divの要素のsub_div要素の後ろにdivを挿入する