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』プロパティに代入する、という流れはしっかりマスターしちゃってください。

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

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

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

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

ではではー。

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

著者が愛する小型哺乳類

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

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

トップページへ

前の記事へ

次の記事へ

Tweet

シェア