【JavaScript】HTML DOMのinsertAdjacentHTML()メソッドの使い方を解説
HTML DOMのinsertAdjacentHTML()メソッドは、テキスト文字列をHTMLとして解析し、指定した位置に挿入するためのメソッドです。innerHTMLプロパティのように既存のコンテンツを上書きすることなく、要素の前後や内部に新しいHTMLを追加できるのが大きな特徴です。
構文
insertAdjacentHTML()は、第1引数に挿入位置を示す文字列（positionString）、第2引数に挿入するHTMLコード（htmlString）を指定して呼び出します。
node.insertAdjacentHTML("positionString", "htmlString")
positionStringに指定できる値
positionStringには、挿入位置を表す次の4つの文字列を指定できます。
| positionString | 説明 |
|---|---|
| beforebegin | ノード要素の直前にhtmlStringを挿入します |
| afterbegin | ノード要素の内部の先頭にhtmlStringを挿入します |
| beforeend | ノード要素の内部の末尾にhtmlStringを挿入します |
| afterend | ノード要素の直後にhtmlStringを挿入します |
htmlStringについて
htmlStringには、挿入したい有効なHTMLコードを文字列で指定します。例えば、以下のようなコードを指定できます。
<span>new span</span>
<p>This is a new paragraph</p>
使用例
insertAdjacentHTML()メソッドを使った具体的なサンプルを見てみましょう。次のコードでは、ボタンをクリックすると「Myself」スパンの直後（afterend）に、新しい「Son」スパンが挿入されます。
<!DOCTYPE html>
<html>
<head>
<title>insertAdjacentHTML()</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>insertAdjacentHTML( )</legend>
<h1>Family Tree</h1>
<span id="GrandFather">Grand Father --></span>
<span id="Father">Father --></span>
<span id="Myself">Myself</span>
<input type="button" onclick="rectifyTree()" value="Son is born">
</fieldset>
</form>
<script>
function rectifyTree() {
var MSpan = document.getElementById("Myself");
MSpan.insertAdjacentHTML("afterend", "<span id='Son'>-->Son</span>");
}
</script>
</body>
</html>
実行結果
このコードを実行すると、次のような表示になります。
「Son is born」ボタンをクリックする前：
「Son is born」ボタンをクリックした後：
注意点
insertAdjacentHTML()は、渡された文字列をそのままHTMLとして解析して挿入します。そのため、ユーザー入力などの信頼できない文字列をそのまま渡すと、XSS（クロスサイトスクリプティング）攻撃を受ける危険があります。外部からの入力を扱う場合は、事前にエスケープ処理を行うか、textContentプロパティの利用を検討しましょう。
-
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()メソッドの主な活用シーン ページ読み込み時やフォーム表示時に、最初の入力欄へ自動的にカーソルを合わせる バリデーションエラーが発生した際に、該当する入力フィールドへフォーカスを移動する モーダルウィンドウを開いたときに、特定のボタンや