HTML DOMのappendChild()メソッドとは？使い方を実例付きで解説
HTML DOMのappendChild()メソッドは、新しく作成したテキストノードや要素ノードを、親ノードの子ノードリストの末尾に追加するために使用します。さらに、既存の要素を現在の位置から別の位置へ移動させることも可能です。appendChild()を使えば、リストに新しい項目を追加したり、ある段落の下に別の段落を追加したりすることもできます。
構文
appendChild()メソッドの構文は以下のとおりです。
node.appendChild( node )
ここで指定するパラメータ「node」は、追加対象となるオブジェクトです。このパラメータは必須となります。
サンプルコード
それでは、appendChild()メソッドの具体的な使用例を見てみましょう。
<!DOCTYPE html>
<html>
<body>
<p>Click the button to create a paragraph and append it to the div</p>
<div id="SampleDIV">
A DIV element
</div>
<button onclick="AppendP()">Append</button>
<script>
var x=1;
function AppendP() {
var paragraph = document.createElement("P");
paragraph.innerHTML = "This is paragraph "+x;
document.getElementById("SampleDIV").appendChild(paragraph);
x++;
}
</script>
</body>
</html>
実行結果
上記のコードを実行すると、次のような画面が表示されます。
「Append」ボタンを3回クリックした後の表示は以下のとおりです。
コードの解説
上記のサンプルでは、以下のような処理が行われています。
まず、idが「SampleDIV」であるdiv要素を用意しています。ここに追加されたノードは、このdivの子ノードとして配置されます。
<div id="SampleDIV"> A DIV element </div>
次に、「Append」という名前のボタンを配置し、クリックされたに関数AppendP()が実行されるように設定しています。
<button onclick="AppendP()">Append</button>
AppendP()関数では、まずdocument.createElement()を使って新しいp要素を作成し、変数paragraphに代入します。続いてinnerHTMLを使って段落内にテキストを設定し、変数xの値を文字列に連結しています。この変数xは、「Append」ボタンをクリックするたびに1ずつ増加するため、クリックの回数に応じて異なる番号の段落が生成されます。最後に、新しく作成した段落をappendChild()によってdiv要素の子ノードとして追加しています。
var x=1;
function AppendP() {
var paragraph = document.createElement("P");
paragraph.innerHTML = "This is paragraph "+x;
document.getElementById("SampleDIV").appendChild(paragraph);
x++;
}
-
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()メソッドの主な活用シーン ページ読み込み時やフォーム表示時に、最初の入力欄へ自動的にカーソルを合わせる バリデーションエラーが発生した際に、該当する入力フィールドへフォーカスを移動する モーダルウィンドウを開いたときに、特定のボタンや