Node.insertBefore を使って
指定した要素の前後に要素を追加するコードを書きました
例
このdiv要素を基準に追加する
指定する要素は３つ
- 親要素
- 挿入する要素
- どの要素の前に挿入するか
コード.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を挿入する |
