ywork2020.com

Title

指定した箇所にテキストを挿入する

目次 (INDEX)

insertAdjacentTextとは

ここで説明するinsertAdjacentText とは次の語句からなるjavascriptのメソッドです。
insert
読み: インサート
意味: 挿入
adjacent
読み: アジェイセントゥ
意味: 隣接、隣り合った
text
読み: テキスト
意味: 文字情報

目次に戻る

Element.insertAdjacentTextの概要

このメソッドは、指定要素に対して指定したポジションにテキストを挿入します。

テキストは純粋な文字情報であり、仮にHTMLタグが文字情報の中に含まれていても無視されます。 つまり、純粋なテキストノードとしてDOMツリー内の指定された場所に挿入されることになります。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。

Element.insertAdjacentText(position, text);

目次に戻る

サンプルコードと実行結果

このメソッドは指定された箇所(position)に、 テキスト(text)を挿入します。 挿入されたテキストは、純粋なテキストとしてDOMツリーに挿入されます。

以下、構文です。

Element.insertAdjacentText(position, text);

このメソッドで指定するpositionには4つのキーワードがあります。 その4つのキーワードでテキストが挿入される位置が変わりますので一つずつサンプルで確認しておきます。

ポジション: beforebegin

beforebeginポジションは指定要素の直前にテキストを挿入します。

サンプルコード: CSS
<style>
	#idAnswer{
		font-size: 120%;
		font-weight: bold;
		padding: 5px;
		border: 1px solid ##darkgray;
		background-color: ##khaki;
		width: fit-content;
	}
</style>
  • 03: 文字の大きさ: (120%)
  • 04: 文字の太さ: (太い)
  • 05: 内余白: (5px)
  • 06: 境界線: (1px 実線 darkgray)
  • 07: 背景色: (khaki)
  • 08: 横幅: (コンテンツ幅)
サンプルコード: HTML
<body>
	<output id="idAnswer">innerText</output>
</body>
  • 02: output要素 (insertAdjacentTextの実行結果を出力)
サンプルコード: script
<script>
	let elmAnswer = document.getElementById("idAnswer");
	elmAnswer.insertAdjacentText("beforebegin","<span>YWORK</span>");
</script>
  • 02: elmAnswerという要素参照の変数を宣言 (idAnswerを参照)
  • 03: elmAnswerにinsertAdjacentTextメソッドを使用 (指定要素の直前に挿入)
実行結果:
答え: id="idAnswer"
innerText

目次に戻る

ポジション: afterbegin

afterbeginポジションは指定要素内の最初の子要素の前にテキストが挿入されます。

サンプルコード: CSS
<style>
	#idAnswer{
		font-size: 120%;
		font-weight: bold;
		padding: 5px;
		border: 1px solid ##darkgray;
		background-color: ##khaki;
		width: fit-content;
	}
</style>
  • 03: 文字の大きさ: (120%)
  • 04: 文字の太さ: (太い)
  • 05: 内余白: (5px)
  • 06: 境界線: (1px 実線 darkgray)
  • 07: 背景色: (khaki)
  • 08: 横幅: (コンテンツ幅)
サンプルコード: HTML
<body>
	<output id="idAnswer">innerText</output>
</body>
  • 02: output要素 (insertAdjacentTextの実行結果を出力)
サンプルコード: script
<script>
	let elmAnswer = document.getElementById("idAnswer");
	elmAnswer.insertAdjacentText("afterbegin","<span>YWORK</span>");
</script>
  • 02: elmAnswerという要素参照の変数を宣言 (idAnswerを参照)
  • 03: elmAnswerにinsertAdjacentTextメソッドを使用 (指定要素の中の最初の子要素の前に挿入)
実行結果:
答え: id="idAnswer"
innerText

目次に戻る

ポジション: beforeend

beforeendポジションは指定要素内の最後の子要素の後にテキストが挿入されます。

サンプルコード: CSS
<style>
	#idAnswer{
		font-size: 120%;
		font-weight: bold;
		padding: 5px;
		border: 1px solid ##darkgray;
		background-color: ##khaki;
		width: fit-content;
	}
</style>
  • 03: 文字の大きさ: (120%)
  • 04: 文字の太さ: (太い)
  • 05: 内余白: (5px)
  • 06: 境界線: (1px 実線 darkgray)
  • 07: 背景色: (khaki)
  • 08: 横幅: (コンテンツ幅)
サンプルコード: HTML
<body>
	<output id="idAnswer">innerText</output>
</body>
  • 02: output要素 (insertAdjacentTextの実行結果を出力)
サンプルコード: script
<script>
	let elmAnswer = document.getElementById("idAnswer");
	elmAnswer.insertAdjacentText("beforeend","<span>YWORK</span>");
</script>
  • 02: elmAnswerという要素参照の変数を宣言 (idAnswerを参照)
  • 03: elmAnswerにinsertAdjacentTextメソッドを使用 (指定要素の中の最後の子要素の後に挿入)
実行結果:
答え: id="idAnswer"
innerText

目次に戻る

ポジション: afterend

afterendポジションは指定要素の直後にテキストを挿入します。

サンプルコード: CSS
<style>
	#idAnswer{
		font-size: 120%;
		font-weight: bold;
		padding: 5px;
		border: 1px solid ##darkgray;
		background-color: khaki;
		width: fit-content;
	}
</style>
  • 03: 文字の大きさ: (120%)
  • 04: 文字の太さ: (太い)
  • 05: 内余白: (5px)
  • 06: 境界線: (1px 実線 darkgray)
  • 07: 背景色: (khaki)
  • 08: 横幅: (コンテンツ幅)
サンプルコード: HTML
<body>
	<output id="idAnswer">innerText</output>
</body>
  • 02: output要素 (insertAdjacentTextの実行結果を出力)
サンプルコード: script
<script>
	let elmAnswer = document.getElementById("idAnswer");
	elmAnswer.insertAdjacentText("afterend","<span>YWORK</span>");
</script>
  • 02: elmAnswerという要素参照の変数を宣言 (idAnswerを参照)
  • 03: elmAnswerにinsertAdjacentTextメソッドを使用 (指定要素の直後に挿入)
実行結果:
答え: id="idAnswer"
innerText

目次に戻る

insertAdjacentTextを使用する上での要点

Element.insertAdjacentText(position, text);

insertAdjacentTextメソッドの1つめの引数であるpositionには4つのキーワードが指定できます。 このキーワードで指定要素のどの部分にtextを挿入するかが決定されます。

  1. beforebegin: 指定要素の直前
  2. afterbegin: 指定要素内の最初の子要素の前
  3. beforeend: 指定要素内の最後の子要素の後
  4. afterend: 指定要素の直後

上記を単純な例で表すと下記の通りです。

beforebegin
<指定要素>
	afterbegin
	<子要素>
		innerText
	</子要素>
	beforeend
</指定要素>
afterend

目次に戻る