JavaScriptで文章を変更・画像を挿入等HTMLに干渉する方法/innerHTMLプロパティの使い方

narrative IT

これぞJavaScriptの花形! という感じの、JavaScriptからHTMLに対して動的に変更を加えていく方法のご紹介です。

Advertisements

innerHTMLを使うざっくりした流れ

innerHTMLは読んで字のごとく、HTMLの中身、エレメントの値を格納するプロパティです(このように、HTMLをElementオブジェクトとして=外部から変更可能な対象として扱うモデルをDOMと言います)。HTML限定なのでオブジェクトもエレメント限定です。

JavaScriptにおけるDOMとは何か
DOMに関して理解するためには、オブジェクトの中にプロパティがある、という状態をしっかりと理解している必要があります。 逆に言えばそれがわかってれば何も難しくないです。HTMLをオブジェクト扱いすること=DOMです。

まずはHTML中の要素(divとかpとか)に対し、IDなどを手がかりに「どれに変更を加えるか」を決定します。

HTMLのIDを取得して変数に代入
var 変数名 = document.getElementById(‘要素のID’);

そうしないと何に対して変更を加えていいか決められません。
変更対象が決まったら、その値を別の変数に代入して、変数のinnerHTMLプロパティを変更することで「内容を書き換え」ます。

JavaScriptからHTMLやCSSを変更する方法/getElementById()メソッドの使い方
あらかじめHTMLでボタンや画像に任意のID等を付けておいて、それをJavaScriptで読み取ることでJavaScriptとHTML/CSSの橋渡しをすることができます。

という流れを上で書いているので繰り返しはしませんが、コードで言うとこうです。

<!-- 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に出力";
}
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については以上です。

コメント