insertAdjacentHTMLとは
- ここで説明するinsertAdjacentHTML とは次の語句からなるjavascriptのメソッドです。
- insert
- 読み: インサート
意味: 挿入 - adjacent
- 読み: アジェイセントゥ
意味: 隣接、隣り合った - html
- 読み: HTML
意味: ハイパーテキストマークアップランゲージ
Element.insertAdjacentHTMLの概要
このメソッドは、指定要素に対して指定したポジションにテキストを挿入します。
ただし、テキストは挿入される前にHTML、またはXMLに変換されてから挿入されるので結果としてHTMLのコードとして挿入されます。 つまり、ノードとテキストはDOMツリー内の指定された場所に挿入されることになります。
構文
サンプルを見る前に構文を確認しておきます。
Element.insertAdjacentHTML(position, text);サンプルコードと実行結果
このメソッドは指定された箇所(position)に、 テキスト(text)を挿入します。 挿入されたテキストはHTML、またはXMLにパースされるので、結果として要素とテキストとして認識され、DOMツリーに追加されます。
以下、構文です。
Element.insertAdjacentHTML(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">innerHTML</output>
</body>
- 02: output要素 (insertAdjacentHTMLの実行結果を出力)
サンプルコード: script
<script>
let elmAnswer = document.getElementById("idAnswer");
elmAnswer.insertAdjacentHTML("beforebegin","<span style='color: red;'>YWORK</span>");
</script>
- 02: elmAnswerという要素参照の変数を宣言 (idAnswerを参照)
- 03: elmAnswerにinsertAdjacentHTMLメソッドを使用 (指定要素の直前に挿入)
ポジション: 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">innerHTML</output>
</body>
- 02: output要素 (insertAdjacentHTMLの実行結果を出力)
サンプルコード: script
<script>
let elmAnswer = document.getElementById("idAnswer");
elmAnswer.insertAdjacentHTML("afterbegin","<span style='color: red;'>YWORK</span>");
</script>
- 02: elmAnswerという要素参照の変数を宣言 (idAnswerを参照)
- 03: elmAnswerにinsertAdjacentHTMLメソッドを使用 (指定要素の中の最初の子要素の前に挿入)
ポジション: 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">innerHTML</output>
</body>
- 02: output要素 (insertAdjacentHTMLの実行結果を出力)
サンプルコード: script
<script>
let elmAnswer = document.getElementById("idAnswer");
elmAnswer.insertAdjacentHTML("beforeend","<span style='color: red;'>YWORK</span>");
</script>
- 02: elmAnswerという要素参照の変数を宣言 (idAnswerを参照)
- 03: elmAnswerにinsertAdjacentHTMLメソッドを使用 (指定要素の中の最後の子要素の後に挿入)
ポジション: 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">innerHTML</output>
</body>
- 02: output要素 (insertAdjacentHTMLの実行結果を出力)
サンプルコード: script
<script>
let elmAnswer = document.getElementById("idAnswer");
elmAnswer.insertAdjacentHTML("afterend","<span style='color: red;'>YWORK</span>");
</script>
- 02: elmAnswerという要素参照の変数を宣言 (idAnswerを参照)
- 03: elmAnswerにinsertAdjacentHTMLメソッドを使用 (指定要素の直後に挿入)
insertAdjacentHTMLを使用する上での要点
Element.insertAdjacentHTML(position, text);
insertAdjacentHTMLメソッドの1つめの引数であるpositionには4つのキーワードが指定できます。 このキーワードで指定要素のどの部分にtextを挿入するかが決定されます。
- beforebegin: 指定要素の直前
- afterbegin: 指定要素内の最初の子要素の前
- beforeend: 指定要素内の最後の子要素の後
- afterend: 指定要素の直後
上記を単純な例で表すと下記の通りです。
beforebegin
<指定要素>
afterbegin
<子要素>
innerHTML
</子要素>
beforeend
</指定要素>
afterend