これぞJavaScriptの花形！ という感じの、JavaScriptからHTMLに対して動的に変更を加えていく方法のご紹介です。
innerHTMLを使うざっくりした流れ
innerHTMLは読んで字のごとく、HTMLの中身、エレメントの値を格納するプロパティです（このように、HTMLをElementオブジェクトとして＝外部から変更可能な対象として扱うモデルをDOMと言います）。HTML限定なのでオブジェクトもエレメント限定です。
JavaScriptにおけるDOMとは何か
DOMに関して理解するためには、オブジェクトの中にプロパティがある、という状態をしっかりと理解している必要があります。
逆に言えばそれがわかってれば何も難しくないです。HTMLをオブジェクト扱いすること=DOMです。
sunagitsune.com
2019.02.28
まずはHTML中の要素（divとかpとか）に対し、IDなどを手がかりに「どれに変更を加えるか」を決定します。
var 変数名 = document.getElementById(‘要素のID’);
そうしないと何に対して変更を加えていいか決められません。
変更対象が決まったら、その値を別の変数に代入して、変数のinnerHTMLプロパティを変更することで「内容を書き換え」ます。
JavaScriptからHTMLやCSSを変更する方法/getElementById()メソッドの使い方
あらかじめHTMLでボタンや画像に任意のID等を付けておいて、それをJavaScriptで読み取ることでJavaScriptとHTML/CSSの橋渡しをすることができます。
sunagitsune.com
2019.02.18
という流れを上で書いているので繰り返しはしませんが、コードで言うとこうです。
<！-- html -->
<！-- divタグにIDを設定 -->
<div id="example_id" onclick = "ButtonClick();"></div>
<！-- 押すと「ButtonClick」メソッドを実行 -->
<input type = "button" value = "実行" onclick = "ButtonClick();"/>
//JavaScript
function ButtonClick() {
//js_idにexample_idというIDを持つ「div要素の中身」を代入
js_id = document.getElementById("example_id");
//js_idに対してinnerHTMLすることで、divの「値」が変わる
js_id.innerHTML = "JavaScriptでHTMLに出力";
}オブジェクト.innerHTML = “内容”;
入力できるのはテキストだけではない
HTMLを変更できるというのはテキストに限らず、bodyで使う全ての要素を代入することができます。
<！-- html -->
<input type = "button" value = " 見出しの代入 " onclick = "midashi();"/> <input type = "button" value = " 絵の代入 " onclick = "kitune();"/> <input type = "button" value = " テーブルを代入" onclick = "maketable();"/>
//JavaScript
function midashi(){
jsmidashi = document.getElementById("dainyu");
jsmidashi.innerHTML = "<h2>見出し</h2>";
}
function kitune(){
jskitune = document.getElementById("dainyu");
jskitune.innerHTML = '<img src="https://sunagitsune.com/wp-content/uploads/2019/01/sg.jpg" alt="sg" width="50" height="50" />';
}
function maketable(){
jstable = document.getElementById("dainyu");
jstable.innerHTML = '<table><tr><th>日程</th><th>内容</th></tr><tr><td>1/3</td><td>会議</td></tr><tr><td>1/12</td><td>引越し</td></tr><tr><td>1/15</td><td>デート</td></tr></table>';
}同じことをするだけでこれだけのバリエーションが生み出せます。極端に言えばbody要素にinnerHTMLを使用することでページを全てJavaScriptで書くことも可能ですが、色々と事情があり、テキストを挿入するのにinnerHTMLを使用するのは推奨されません。
innerHTMLについては以上です。
コメント