スキップしてメイン コンテンツに移動

JavaScriptでhtmlを書き換えるinnerHTML

htmlのマークアップをJavaScriptのプログラミングで書き換える、またはサイトのソースコードを置き換えるにはinnerHTMLが良く使われる。

Element.innerHTML プロパティは、要素の子孫を記述する HTML 構文を設定または取得します。

element.innerHTML via MDN

innerHTMLはElementインターフェースのDOMString(文字列)型のプロパティで、サイト上の要素内容のマークアップを表す。

JavaScriptでは他にも似たようなプロパティのinnerTexttextContentがあって――どちらもNodeインターフェースのDOMString型に含まれる――プレーンテキスト(htmlタグなどのマークアップ言語を含まない)を設定取得できる。双方にはcssで非表示のコンテンツを知覚するかしないなどの細かい違いがあるけれども機能そのものには大差がないみたいだ。ただしブラウザによって前者は挙動にバラ付きが多くて後者はさほどでもないからJavaScriptでサイトのプレーンテキストを書き換えるためにはinnerTextよりもtextContentが一般的に使い易いかも知れない。

innerHTMLプロパティはプレーンテキストだけではなくてhtmlタグなどのマークアップ言語も設定取得できるのが便利だ。しかし例えばhtmlの開始タグの「<」や終了タグの「>」が挿入されると他のhtmlタグに影響してマークアップが崩れるような状況が起こり得る。加えて何等かの仕方で、JavaScriptプログラムに支障を来さないともかぎらないからサイト内容を書き換える際には特に配慮して使わなくてはならない。

草むらに寝そべる子羊

htmlを書き換えるJavaScriptプログラミング

サイト内容を呼び出すgetElementByIdなどのメソッドとinnerHTMLを組み合わせて記述する。

サンプルのソースコード

html

<p id="change">
書き換え前の文章
</p>
<input type="button" value="ボタン" onclick="pid()">

JavaScript

var pid = function(){
document.getElementById("change").innerHTML = "<b>書き換え後の文章</b>";
}

サンプルの実行結果

書き換え前の文章

変数に対しては構文を二つに分けて記述して構わない。

var test = document.getElementById("change");
test.innerHTML = "<b>書き換え後の文章</b>";

innerHTMLの文字列に他の変数を追加するには連結の演算子の「+」を使う。

var ins = "挿入句";
document.getElementById("change").innerHTML = "<b>書き換え" + ins + "後の文章</b>";

サイト内容を呼び出す四種類のメソッド

JavaScriptにはDOMのノード:htmlやxmlを取り扱うAPIの階層を指定してサイト内容を呼び出すメソッドがあってinnerHTMLプロパティなどで書き換えるのに役立つ。

getElementsByTagName("タグ")
指定された全てのタグの配列を返す
getElementById("id")
指定された一つのidの要素を返す
getElementsByClassName("class")
指定された全てのclassの配列を返す
getElementsByName("name")
指定された全てのnameの配列を返す

サイト作成で、idはページに一つしか使用しない通り、メソッドで指定して呼び出す場合も一つしか当て嵌まらない。他の三種類のタグとclassとnameは幾つも含まれる場合があってメソッドで呼び出すと配列のHTMLCollection(集合)になる。実際に一つしかない場合でも配列の状態で、返されるからプログラミングでの扱いには注意しなくてはならない。

配列から書き換えるサイト内容を選ぶ

サンプルのソースコード

html

<p class="change">
書き換え前の文章
</p>
<input type="button" value="ボタン" onclick="pclass()">

JavaScript

var pclass = function(){
document.getElementsByClassName("change").item(0).innerHTML = "<b>書き換え後の文章</b>";
}

サンプルの実行結果

書き換え前の文章

HTMLCollectionの数値の配列にはitemメソッドが使える。他にも角括弧構文が使えるので、サンプルの.item(0)は[0]と記述して構わない。因みに文字列の配列にはnamedItemメソッドか数値の場合と同様に角括弧構文が使えるらしい。

ソースコードを置き換える場合の注意点

innerHTMLを使うとhtmlタグなどを文字列として追加できるけど、ところがプログラミングが機能しない記述もあるから注意しなくてはならない。

例えばリンクタグのaによってURLを指定するような場合にソースコードに半角引用符を使うとinnerHTMLの記述の半角引用符と被ってプログラムが途中から動かなくなってしまう。

半角引用符の重複を避ける二つの方法

一重と二重を使い分ける

element.innerHTML = "<a href='https://example.com/'>リンク</a>";

または

element.innerHTML = '<a href="https://example.com/">リンク</a>';

実体参照でエスケープする

element.innerHTML = "<a href=&quot;https://example.com/&quot;>リンク</a>";

または

element.innerHTML = '<a href=&apos;https://example.com/&apos;>リンク</a>';

文字実体参照の半角二重引用符が「&quot;」で、半角一重引用符が「&apos;」に相当するけど、あるいは数値実体参照の「&#34;」や「&#39;」を使って記述しても大丈夫だ。

innerHTMLプロパティは取り込んだサイト内容を完全に上書きするから元の状態を部分的に残すような使い方はできない。

一部を書き換えるには書き換えない部分も含めて全体的に行うか、htmlのマークアップを目的に合わせて呼び出せるように区画タグのspanなどにidやclassなどを付けて予め細かく区切っておく。

コンテンツを新たに追加するだけならば又別にappendChildinsertAdjacentHTMLを使ってプログラムを組むのが適しているだろう。

コメント

些細な日常の人気の投稿

PlayストアでAndroidアプリのダウンロードが非常に遅い場合の打開策

Imgurで画像URLと埋め込みコードを取得する方法

ジョナサン・モフェットのドラムの8ビートの切れ味の鋭いグルーヴ