JavaScriptで表示変更

こんにちは、さるまりんです。

Webページ上でボタンやリンクをクリックしたら表示変えたいなって時ないですか？

今日はそれです。JavaScriptです。

HTMLの要素の中身を変更

JavaScriptでHTMLの要素の中身を変更するプロパティは次の3つです。

innerHTML
innerText
textContent

どう違うの？

innerHTML

innerHTMLはHTMLを設定するとそれをちゃんとHTMLとして表示してくれます。

こんな感じです。

JavaScript

function feed() {
    var elem = document.getElementById("how-you-feel-text");
    elem.innerHTML = "<span style='color: blue;'>ありがとう。お腹いっぱい。</span>";
}
document.getElementById("feed-button").addEventListener("click", feed);

HTML

<p id="how-you-feel-text">お腹すいた</p>
<button id="feed-button">食事をあげる</button>

ボタンを押してみてください。お腹すいたが変わりますよ。

お腹すいた

innerText と textContent

innerTextとtextContentは設定したものがそのまま出力されます。
それぞれに<span style='color: red;'>食べたよ</span>を設定すると、赤色で「食べたよ」が表示されるわけではなくHTMLのタグも含めてそのまま表示されます。

こんな感じです。

JavaScript

function feedA() {
    var elemA = document.getElementById("how-a-feel-text");
    var elemB = document.getElementById("how-b-feel-text");
    elemA.innerText = "<span style='color: blue;'>ありがとう。お腹いっぱい。</span>";
    elemB.textContent = "<span style='color: red;'>え？僕には？</span>";
}
document.getElementById("feed-a-button").addEventListener("click", feedA);

HTML

<p id="how-a-feel-text">お腹すいた</p>
<p id="how-b-feel-text">お腹すいた</p>
<button id="feed-a-button">食事をあげる</button>

ボタンを押してみてください。こちらは「お腹すいた」が2つ。それぞれ変わりますよ。

お腹すいた

この2つは何が違うのかをざっくりいうとブラウザでのサポートです。
textContentはInternet Explorerでサポートされておらず、innerTextはFireFoxでサポートされていません。
※どちらも新しいバージョンのブラウザでは動作します。

jQueryでは？

これをjQueryを使うとこんな実装になります。

innerHTML相当

JavaScript

$("#feed-u-button").on('click', function() {
    $("#how-u-feel-text").html("<span style='color: blue;'>ありがとう。お腹いっぱい。</span>");
});

HTML

<p id="how-u-feel-text">お腹すいた</p>
<button id="feed-u-button">食事をあげる</button>

ボタンを押してみてください。

お腹すいた

textContent、innerText相当

JavaScript

$("#feed-c-button").on('click', function() {
    $("#how-c-feel-text").text("<span style='color: blue;'>ありがとう。お腹いっぱい。</span>");
    $("#how-d-feel-text").text("<span style='color: red;'>え？僕には？</span>");
});

HTML

<p id="how-c-feel-text">お腹すいた</p>
<p id="how-d-feel-text">お腹すいた</p>
<button id="feed-c-button">食事をあげる</button>

ボタンを押してみてください。

お腹すいた

使える環境ならこちらの方が楽(？)かもしれませんね。

最近、HTML/CSS/JavaScriptの必要性を痛感しています。
僕は無知だ。勉強しよう。

読んでくださってありがとうございます。

ではまた！