HTML DOMのinsertBefore()メソッドの使い方を徹底解説
insertBefore()メソッドとは
HTML DOMのinsertBefore()メソッドは、すでに存在する子ノードの直前に、新しいノードを挿入するためのメソッドです。リストの先頭に項目を追加したい場合など、DOM操作で要素の挿入位置を細かく制御したいときに非常に便利です。
構文
insertBefore()メソッドの基本的な構文は以下の通りです。
node.insertBefore(newNode, existingNode)
パラメータ
このメソッドには、以下の2つのパラメータを指定します。
| パラメータ | 説明 |
|---|---|
| newNode | 先頭に追加したい、新しく作成した子ノードです |
| existingNode | すでに存在しているノードです。このノードの直前にnewNodeが挿入されます |
使用例
ここでは、insertBefore()メソッドを使って、手順リストの先頭に新しい項目を追加する例を紹介します。「Add」ボタンをクリックすると、「Boil Water（お湯を沸かす）」という手順がリストの最初に挿入されます。
<!DOCTYPE html>
<html>
<head>
<title>insertBefore()</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
ol {
width:30%;
margin: 0 auto;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>insertBefore( )</legend>
<h1>How to make tea</h1>
<h3>Steps:</h3>
<ol id="stepList">
<li>Add Tea Bag</li>
<li>Add Sugar</li>
<li>Add Milk</li>
</ol>
<input type="button" onclick="addStep()" value="Add">
</fieldset>
</form>
<script>
function addStep() {
var newIngredient = document.createElement("LI");
var textnode = document.createTextNode("Boil Water");
newIngredient.appendChild(textnode);
var stepList = document.getElementById("stepList");
stepList.insertBefore(newIngredient, stepList.childNodes[0]);
}
</script>
</body>
</html>コードの解説
このサンプルコードの処理の流れは以下の通りです。
1. document.createElement("LI")で、新しいLI要素を作成します。
2. document.createTextNode("Boil Water")で、挿入するテキストノードを作成します。
3. appendChild()で、テキストノードを新しいLI要素に追加します。
4. insertBefore()で、リストの最初の子ノード（stepList.childNodes[0]）の直前に、新しいLI要素を挿入します。
実行結果
このコードを実行すると、以下のような結果が得られます。
「Add」ボタンをクリックする前：
「Add」ボタンをクリックした後：
ボタンをクリックすると、新しいLI要素がリストの先頭に挿入され、「Boil Water」が最初の手順として表示されていることが確認できます。このように、insertBefore()メソッドを使えば、既存のノードを基準として任意の位置に要素を柔軟に挿入できます。
-
HTML DOMのhasAttributes()メソッドとは？構文・使い方・サンプルコードを解説
HTML DOMのhasAttributes()メソッドは、ある要素が属性（attribute）を1つでも持っているかどうかを判定するためのメソッドです。要素が属性を保持している場合はtrueを返し、1つも属性を持っていない場合はfalseを返します。また、このメソッドを要素ノード以外のノードに対して呼び出した場合、戻り値は常にfalseになるという特徴があります。 構文 hasAttributes()メソッドの基本構文は以下のとおりです。 node.hasAttributes() 引数は不要で、対象となるノードに対して直接呼び出すだけで、真偽値（Boolean）が返されます。 使用例 ここで
-
HTML DOMのfocus()メソッドとは？基本構文と使い方を実例付きで解説
HTML DOMのfocus()メソッドは、指定したHTML要素にフォーカスを設定するために使用されるメソッドです。ただし、すべてのHTML要素にフォーカスを適用できるわけではありません。たとえば、<p>タグのようにフォーカスを受け付けない要素も存在します。また、要素からフォーカスを解除したい場合は、blur()メソッドを使用します。 focus()メソッドの主な活用シーン ページ読み込み時やフォーム表示時に、最初の入力欄へ自動的にカーソルを合わせる バリデーションエラーが発生した際に、該当する入力フィールドへフォーカスを移動する モーダルウィンドウを開いたときに、特定のボタンや