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

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の開始タグの「<」や終了タグの「>」が挿入されると他のタグに影響してマークアップが崩れるような状況が起こり得る。加えて何等かの仕方で、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の項目を返す
querySelector("セレクター")
指定された先頭のセレクターの項目を返す
querySelectorAll("セレクター")
指定された全てのセレクターの項目を返す

※セレクターの記述はタグやidならば「#」付きやclassならば「.」付きなどを使ってCSSのstyleタグでの指定と同様に行う。

サイト作成で、idはページに一つしか使用しない通り、メソッドで指定して呼び出す場合も一つしか当て嵌まらない。そしてquerySelector(Allなし)も当て嵌まるのは同じように一つだけで、サイトのDOMに同名のセレクターがタグかclassで、複数、存在するとしても先頭が対象になる。他の四種類のタグとclassとnameとquerySelectorAllのセレクターは幾つも含まれる場合があってメソッドで呼び出すと配列のような項目のリストのHTMLCollection(集合)になる。サイトのDOMに一つしかない場合でも複数の項目の状態で、返されるからプログラミングでの扱いには注意しなくてはならない。

追記:HTMLCollectionを通常の配列として扱うにはサイト内容を取得する際に「[].slice.call(サイト内容を呼び出すメソッド)」という形で記述する。

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アプリのダウンロードが非常に遅い場合の打開策

イメージ

ジャパネットたかたの丸尾詩織の商品説明に気持ちが入っていて素晴らしい理由

イメージ