JavaScriptでHTMLを書き換えるinnerHTML

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

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

element.innerHTML｜MDN｜Mozilla

innerHTMLはElementインターフェースのDOMString（文字列）型のプロパティで、サイト上の要素内容のマークアップを表す。JavaScriptでは他にも似たようなプロパティのinnerTextやtextContentがあって――どちらもNodeインターフェースのDOMString型に含まれる――プレーンテキスト（HTMLなどのマークアップ言語を含まない）を設定取得できる。双方にはCSSで非表示のコンテンツを知覚するかしないなどの細かい違いがあるけれども機能そのものには大差がないみたいだ。ただしブラウザによって前者は挙動にバラ付きが多くて後者はさほどでもないからJavaScriptでサイトのプレーンテキストを書き換えるためにはinnerTextよりもtextContentが一般的に使い易いかも知れない。innerHTMLプロパティはプレーンテキストだけではなくてHTMLなどのマークアップ言語も設定取得できるのが便利だ。しかし例えばHTMLの開始タグの「<」や終了タグの「>」が挿入されると他のタグに影響してマークアップが崩れるような状況が起こり得る。加えて何等かの仕方で、JavaScriptプログラムに支障を来さないともかぎらないからサイト内容を書き換える際には特に配慮して使わなくてはならない。HTMLを書き換えるJavaScriptプログラミング 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 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の項目を返す

querySelector("セレクター")

指定された先頭のセレクターの項目を返す

querySelectorAll("セレクター")

指定された全てのセレクターの項目を返す

※セレクターの記述はタグやidならば「#」付きやclassならば「.」付きなどを使ってCSSのstyleタグでの指定と同様に行う。サイト作成で、idはページに一つしか使用しない通り、メソッドで指定して呼び出す場合も一つしか当て嵌まらない。そしてquerySelector（Allなし）も当て嵌まるのは同じように一つだけで、サイトのDOMに同名のセレクターがタグかclassで、複数、存在するとしても先頭が対象になる。他の四種類のタグとclassとnameとquerySelectorAllのセレクターは幾つも含まれる場合があってメソッドで呼び出すと配列のような項目のリストのHTMLCollection（集合）になる。サイトのDOMに一つしかない場合でも複数の項目の状態で、返されるからプログラミングでの扱いには注意しなくてはならない。追記：HTMLCollectionを通常の配列として扱うにはサイト内容を取得する際にslice()メソッドで[].slice.call(サイト内容を呼び出すメソッド)かスプレッド構文で[...サイト内容を呼び出すメソッド)]という形で記述する。slice()メソッドの例＿document.getElementsByTagName("p")ならば[].slice.call(document.getElementsByTagName("p"))となる。スプレッド構文の例＿document.getElementsByTagName("p")ならば[...document.getElementsByTagName("p")]となる。HTMLCollectionから書き換えるサイト内容を選ぶロボットの手がHTMLCollectionから書き換えるサイト内容を選ぶように光の玉を一つ掴んでいる

ロボットの手がHTMLCollectionから書き換えるサイト内容を選ぶように光の玉を一つ掴んでいる

サンプルのソースコードHTML

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

JavaScript

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

サンプルの実行結果書き換え前の文章 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>';

文字実体参照の半角二重引用符が「"」で、半角一重引用符が「'」に相当するけど、あるいは数値実体参照の「"」や「'」を使って記述しても大丈夫だ。innerHTMLプロパティは取り込んだサイト内容を完全に上書きするから元の状態を部分的に残すような使い方はできない。一部を書き換えるには書き換えない部分も含めて全体的に行うか、HTMLのマークアップを目的に合わせて呼び出せるように区画タグのspanなどにidやclassなどを付けて予め細かく区切っておく。コンテンツを新たに追加するだけならば又別にappendChildやinsertAdjacentHTMLを使ってプログラムを組むのが適しているだろう。