HTML DOM insertAdjacentElement()メソッドの使い方と位置指定パターンを解説
HTML DOMのinsertAdjacentElement()メソッドは、基準となるノードを起点として、指定した位置に新しい要素を挿入するためのメソッドです。本記事では、基本的な構文から、挿入位置を指定する4つのキーワード、実際に動作するサンプルコードまで、わかりやすく解説します。
構文
insertAdjacentElement()メソッドは、第1引数に挿入位置を表す「positionString」、第2引数に挿入対象の「element」を指定して呼び出します。
node.insertAdjacentElement("positionString", element)
位置指定文字列（positionString）の種類
「positionString」には、挿入位置を表す以下の4つの値を指定できます。指定する値によって、要素が挿入される場所が変化します。
| positionString | 説明 |
|---|---|
| beforebegin | node要素の直前に要素を挿入します（要素の外側） |
| afterbegin | node要素の内部の先頭に要素を挿入します |
| beforeend | node要素の内部の末尾に要素を挿入します |
| afterend | node要素の直後に要素を挿入します（要素の外側） |
サンプルコード
それでは、insertAdjacentElement()メソッドの具体的な使用例を見てみましょう。この例では、初期状態では「Father → Grand Father → Myself」の順に表示されていますが、「Correct Family Tree（家系図を修正）」ボタンをクリックすると、祖父（GrandFather）のspan要素の直後に父（Father）のspan要素が移動し、正しい家系図の順序に修正されます。
<!DOCTYPE html>
<html>
<head>
<title>insertAdjacentElement()</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>insertAdjacentElement( )</legend>
<h1>Family Tree</h1>
<span id="Father">Father --></span>
<span id="GrandFather">Grand Father --></span>
<span id="Myself">Myself</span>
<input type="button" onclick="rectifyTree()" value="Correct Family Tree">
</fieldset>
</form>
<script>
function rectifyTree() {
var FSpan = document.getElementById("Father");
var GFSpan = document.getElementById("GrandFather");
GFSpan.insertAdjacentElement("afterend", FSpan);
}
</script>
</body>
</html>
実行結果
上記のコードを実行すると、次のような画面が表示されます。
ボタンをクリックする前：初期状態では、Father → Grand Father → Myself の順に表示されています。
ボタンをクリックした後：Father要素がGrandFather要素の直後に移動し、Grand Father → Father → Myself という正しい順序に修正されます。
補足：insertAdjacentElement()のメリット
- 挿入に成功した場合は挿入された要素を返し、失敗した場合はnullを返します。
- innerHTMLのようにHTML文字列を再解析しないため、既存のイベントリスナーを保持したまま要素をそのまま移動・挿入できます。
- Chrome、Firefox、Safari、Edgeなど、主要なモダンブラウザで幅広くサポートされています。
-
HTML DOMのfocus()メソッドとは？基本構文と使い方を実例付きで解説
HTML DOMのfocus()メソッドは、指定したHTML要素にフォーカスを設定するために使用されるメソッドです。ただし、すべてのHTML要素にフォーカスを適用できるわけではありません。たとえば、<p>タグのようにフォーカスを受け付けない要素も存在します。また、要素からフォーカスを解除したい場合は、blur()メソッドを使用します。 focus()メソッドの主な活用シーン ページ読み込み時やフォーム表示時に、最初の入力欄へ自動的にカーソルを合わせる バリデーションエラーが発生した際に、該当する入力フィールドへフォーカスを移動する モーダルウィンドウを開いたときに、特定のボタンや
-
HTML DOM の Object オブジェクトとは？主なプロパティと実装例をわかりやすく解説
HTML DOM の Object オブジェクトは、HTML 内の <object> 要素を JavaScript から操作するためのインターフェースです。<object> 要素は、画像や PDF、動画などの外部リソースを Web ページに埋め込む際に使用されます。 Object 要素の作成方法 JavaScript で新しい <object> 要素を作成するには、document.createElement() メソッドを使用します。 var objectElement = document.createElement(OBJECT); Object