Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

  1. トップページ
  2. JavaScript入門編 - HTML要素の中身を変えるinnerHTML

HTML要素の中身を変えるinnerHTML

(´-`).。oO(秋葉原駅のミルクスタンドにある…)
(´-`).。oO(みんなの牛乳が大好きです…)
(´-`).。oO(皆様も秋葉原にお越しいただいたときにはぜひ…)

というわけでどうも。

続いてHTML要素の中身を変更したりしなかったりしてみましょう。

当記事でのHTML要素の中身を変更、というのは

<p id="test">初めてのJavaScript勉強中だよ!</p>

という記述でいうと『初めてのJavaScript勉強中だよ!』という部分を変更するという事を指すこととします。

JavaScriptで要素の中身を変更するプロパティは『innerHTML』(いんなーえいちてぃーえむえる)、『innerText』(いんなーてきすと)、 『textContent』(てきすとこんてんと)の3つがあります。

使い方は同じような感じで以下のようになります。

※innerHTMLの場合

<p id="test">初めてのJavaScript勉強中だよ!</p>

<script>
var elem = document.getElementById("test");
elem.innerHTML = "innerHTML ";
</script>

※innerTextの場合

<p id="test">初めてのJavaScript勉強中だよ!</p>

<script>
var elem = document.getElementById("test");
elem.innerText = "innerText";
</script>

※textContentの場合

<p id="test">初めてのJavaScript勉強中だよ!</p>

<script>
var elem = document.getElementById("test");
elem.textContent = "textContent";
</script>

こんな感じで要素を取得したあとに『.』でつなげて『innerHTML』とかを記述し、そのまま代入すればOKです。

ではそれぞれのプロパティは若干違いがあるのでそれを見て行きましょう。

まず『innerHTML』はHTMLタグを代入するとちゃんとHTMLタグとしてレンダリングされます。ちょっと記述してみますね。

<p id="test">初めてのJavaScript勉強中だよ!</p>

<script>
var elem = document.getElementById("test");
elem.innerHTML = "<span style='color: red;'>span要素に変更したよ!</span>";
</script>

実行させると以下のように表示されます。

こんな感じでHTML要素をそのまま代入することができます。前の記事でもやりましたが上記のように『"』でくくった場合、style属性部分などの記述は『'』を使用する必要がありますのでそこはミスらないよう注意しましょう。

では『textContent』を使用してみます。『textContent』はHTMLタグを代入してもHTMLタグとしてではなくそのまま文字列として表示します。

<p id="test">初めてのJavaScript勉強中だよ!</p>

<script>
var elem = document.getElementById("test");
elem.textContent = "<span style='color: red;'>span要素に変更したよ!</span>";
</script>

これを実行させると以下のようになります。

タグがそのまま出力されていますね。『innerText』も同じような感じでHTMLタグがレンダリングされることなくそのまま出力されます。これがそれぞれのプロパティの違いになります。

続いてややこしいのが『innerHTML』は全てのブラウザで実行することができますが、『textContent』は『Internet Explorer』では動きません。逆に『innerText』は『FireFox』では動きません。

なんでやねん、というお話ですが実は『innerText』は元々『Internet Explorer』が独自に実装したものだったりします。JavaScriptの仕様を決める正式な団体『W3C』が実装したのは『textContent』の方だったのです。というわけで『Firefox』さんでは『innerText』動かなく、逆に『Internet Explorer』では『textContent』は動かなかったりします。

『google chrome』『safari』『Opera』は今回紹介した全てのプロパティを使用することができます。スマホもiphone、android共に標準ブラウザで全て使用することができます。

なんだかとってもややこしいですね。

上記の事を踏まえるとHTMLタグをそのまま書ける『innerHTML』の方が使い勝手が良く、しかも全てのブラウザで使用できるのでこちらを使った方が良いです。処理速度で考えると『innerText』と『textContent』の方が若干早かったりしますがその差は微々たるものですので大量に記述しない限り気にするレベルではございません。

長くなりましたがまとめると基本的に『innerHTML』を使っていけば問題ないです

要素を取得して『.innerHTML』プロパティに代入する、という流れはしっかりマスターしちゃってください。

古いHTMLの場合、『script』要素の中(つまりインラインってことですね)に『</』と記述するのはNGというのがあります。当記事のサンプルの以下のような感じですね。

<script>
var elem = document.getElementById("test");
elem.innerHTML = "<span style='color: red;'>span要素に変更したよ!</span>";
</script>

上記のサンプルでは『</』と記述されている部分があります。さて、これがなぜいかないかというと古めのブラウザでは『script』タグの閉じタグが『</script>』ではなく『</』で判断される可能性があるからだったりします。

これを予防するためには様々な方法がありますが、要するに『<』と『/』がくっついていなければ良いので文字列連結を行ったりすると簡単に予防できます。以下のような感じですね。

<script>
var elem = document.getElementById("test");
elem.innerHTML = "<span style='color: red;'>span要素に変更したよ!<" + "/span>";
</script>

昨今のブラウザでは上記の対応をしなくてもちゃんと表示してくれますのでご安心ください。そして外部JavaScriptを読み込せる場合は『</』とそのまま記述してしまって大丈夫です。こちらも覚えておきましょう。

というわけで今回の記事はこのへんで。

続いての記事ではこれまでの記事でもちょいちょい出てきた『関数』と『引数』というものを勉強していきましょう。

ではではー。

この記事は桜舞が執筆致しました。

著者が愛する小型哺乳類

桜舞 春人 Sakurama Haruto

ISDN時代から様々なコンテンツを制作しているちょっと髪の毛が心配な東京在住のプログラマー。生粋のロングスリーパーで、10時間以上睡眠を取らないと基本的に体調が悪い。好きなだけ寝れる生活を送るのが夢。ゲームとスポーツと音楽が大好き。誰か髪の毛を分けて下さい。

記事の間違いや著作権の侵害等ございましたらお手数ですがまでご連絡頂ければ幸いです。