はじめに

先日、このWEBサイトに珍しくまともな問い合わせがありました（スパムの問い合わせは沢山来ます）。

なんでも「JavaScriptを使って、あるClassの後ろに文字列を追加したい」みたいな内容でした。

CSSだけでもできるのですが、それだと「テキストが選択できないので～」とのこと。

問い合わせフォームを設置している割に昨今の個人情報の云々にシビアになっている私はそのメールに返信する事を躊躇しておりますが、頼られるとそれに応えたい性分なので、代わりにこのページでその方法を紹介することにしました。

願わくばその方がこのページを見てくれていたら良いなと思っています。

目次

CSSでテキストを「先頭」に追加する方法

さて、まずはCSSでテキストを追加する方法を紹介します。

CSSの場合「疑似要素」を使えばテキスト追加ができます。Classの先頭であれば::beforeを使えば良いです。

HTML

<p><span class="p-test01">HTMLで記述しているテキスト</span></p>

CSS

.p-test01::before {
	content: '【CSSで追加したテキスト】';
}

できあがったもの

Classの先頭にテキストが追加されました。

CSSでテキストを「末尾」に追加する方法

同じく後ろにテキストを追加したい場合は::afterを使えば良いです。

HTML

<p><span class="p-test02">HTMLで記述しているテキスト</span></p>

CSS

.p-test02::after {
	content: '【CSSで追加したテキスト】';
}

できあがったもの

JavaScriptでテキストを「先頭」に追加する方法

それでは今度はJavaScriptで文字列（テキスト）を追加する方法を紹介します。

今回のJavaScriptの処理の流れと要点については以下のとおりです。

今回のように、任意の要素（今回はClass）に文字列（テキスト）を追加したい場合は、JavaScriptのinsertAdjacentHTMLメソッドを使います。

insertAdjacentHTMLメソッドの構文について

insertAdjacentHTMLメソッドは、任意のテキストを相対的な位置へ挿入できるメソッドです。

insertAdjacentHTMLメソッドは、第1引数に特定の値を記述し、第2引数に挿入したい文字列（テキスト）を記述します。

第一引数に指定する値の詳細は後述しています。

記述方法

JavaScriptでClass指定をする場合の注意点等については下記を参照して下さい。

• 関連記事
• JavaScriptでClassを取得したい時の設定あれこれ
• https://www.ws-pilgrimage.jphttps://ws-pilgrimage.jp/blog/webcreate/3243/

実際に記述したHTMLとJavaScriptが以下です（CSSは一切設定していません）。

HTML

<p><span class="text_add_begin">HTMLで記述しているテキスト</span></p>
<p><span class="text_add_begin">これもHTMLで記述しています</span></p>
<p><span class="text_add_begin">HTMLで記述しています同様に</span></p>

JavaScript

let text_add_begin = document.getElementsByClassName('text_add_begin');
	for( i=0; i<text_add_begin.length;i++) {
		text_add_begin[i].insertAdjacentHTML('afterbegin','【JavaScriptで追加したテキスト】') ;	
	}

できあがったもの

果たしてテキストはドラッグで選択できるのでしょうか？

JavaScriptでテキストの挿入ができました。また、挿入したテキストはドラッグで選択もできています。

JavaScriptでテキストを「末尾」に追加する方法

同じくHTMLテキストの後ろにテキストを挿入してみました。

後ろにテキストを挿入したい場合はinsertAdjacentHTMLメソッドの値をbeforeendで設定します。

HTML

<p><span class="text_add_end">HTMLで記述しているテキスト</span></p>
<p><span class="text_add_end">これもHTMLで記述しています</span></p>
<p><span class="text_add_end">HTMLで記述しています同様に</span></p>

JavaScript

let text_add_end = document.getElementsByClassName('text_add_end');
	for( i=0; i<text_add_end.length;i++) {
		text_add_before[i].insertAdjacentHTML('beforeend','【JavaScriptで追加したテキスト】') ;	
	}

できあがったもの

こちらもテキストが後ろに挿入され、ドラッグで選択できています。

insertAdjacentTextメソッドについての補足

insertAdjacentHTMLメソッドの第一引数に指定する値には以下の4種類があります。

HTMLのソースを見ればそれぞれの値を指定した時、要素（span）の内外に記述されているかが分かりそうな物ですが、JavaScriptで挿入されたテキストはソースには反映されていませんでした。

という訳で実際には違いがいまいち分かりにくかったので、一つテストをしてみました。

設定値のうちafterbeginとbeforeendは要素内に挿入されるので、要素のテキストカラーを変更するとこの2つのカラーも変更されるはずです。

一方で、beforebeginとafterendは要素の外に挿入されるため、要素のテキストカラーを変更しても影響を受けないはずです。

以上を踏まえて「spanタグ自体のテキストカラーをCSSで赤に設定すれば違いが分かるはず。」と思ってテストした結果がこちらです。

HTMLとJavaScriptをそれぞれ以下のように設定しています。

HTML

<p><span class="text_add_beforebegin">HTMLに記述したテキスト</span></p>
<p><span class="text_add_afterbegin">HTMLに記述したテキスト</span></p>
<p><span class="text_add_beforeend">HTMLに記述したテキスト</span></p>
<p><span class="text_add_afterend">HTMLに記述したテキスト</span></p>

JavaScript

今回for構文は外しています

let text_add_beforebegin = document.getElementsByClassName('text_add_beforebegin');
let text_add_afterbegin = document.getElementsByClassName('text_add_afterbegin');
let text_add_beforeend = document.getElementsByClassName('text_add_beforeend');
let text_add_afterend = document.getElementsByClassName('text_add_afterend');

text_add_beforebegin[0].insertAdjacentText('beforebegin','【beforebeginの場合】') ;	
text_add_afterbegin[0].insertAdjacentText('afterbegin','【afterbeginの場合】') ;
text_add_beforeend[0].insertAdjacentText('beforeend','【beforeendの場合】') ;
text_add_afterend[0].insertAdjacentText('afterend','【afterendの場合】') ;

できあがったもの

やはり予想通りの結果となりました。

恐らく実際のソース的にはこのようになっているはずです。

HTML（イメージ）

Class名の記述は省略しています

<p>【beforebeginの場合】<span>HTMLに記述したテキスト</span></p>
<p><span>【afterbeginの場合】HTMLに記述したテキスト</span></p>
<p><span>HTMLに記述したテキスト【beforeendの場合】</span></p>
<p><span>HTMLに記述したテキスト</span>【afterendの場合】</p>