シェアする
Changing Element Content with innerHTML - Japanese Only
(´-`）.｡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を読み込せる場合は『</』とそのまま記述してしまって大丈夫です。こちらも覚えておきましょう。
というわけで今回の記事はこのへんで。
続いての記事ではこれまでの記事でもちょいちょい出てきた『関数』と『引数』というものを勉強していきましょう。
ではではー。
This article was written by Sakurama.
Author's beloved small mammal |
桜舞 春人 Sakurama HarutoA Tokyo-based programmer who has been creating various content since the ISDN era, with a bit of concern about his hair. A true long sleeper who generally feels unwell without at least 10 hours of sleep. His dream is to live a life where he can sleep as much as he wants. Loves games, sports, and music. Please share some hair with him. |
If you find any errors or copyright issues, please contact us.
