HTMLを表す文字列からノードを作成し指定の位置に追加(insertAdjacentHTML)

Element オブジェクトの insertAdjacentHTML メソッドを使用すると、引数に指定した文字列を HTML 文として解析し、 HTML 文から作成したノードを指定した位置に追加することができます。ここでは insertAdjacentHTML メソッドの使い方について解説します。

(Last modified: )

ノードを指定の位置に追加する

Element オブジェクトの insertAdjacentHTML メソッドを使うと指定した文字列からノードを作成し追加することができます。書式は次のとおりです。 

element.insertAdjacentHTML(position, text)

2 番目の引数に指定した文字列を HTML 文として解析し、 HTML 文からノードを作成します。作成したノードを 1 番目の引数で指定した位置に追加します。

1 番目の引数にはノードを追加する位置を文字列で指定します。指定できる値は次の 4 つです。 

'beforebegin'  element の前に追加
'afterbegin'   element の子要素の先頭に追加
'beforeend'    element の子要素の最後に追加
'afterend'     element の後に追加

2 番目の引数には HTML として解析可能な文字列を指定してください。例えば次のような文字列です。 

'<p class="msg">Hello</p>'

例えば id 属性が xxx の要素ノードのあとに引数に指定した文字列から作成したノードを追加するには次のように記述します。 

let element = document.getElementById('xxx');
element.insertAdjacentHTML('afterend', '<p>Hello</p>');
サンプルコード

次のサンプルを見てください。 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ノードを追加</title>
</head>
<body>

<ul id="shopinfo">
  <li id="m01">リストランテ南青山</li>
  <li id="m02">東京都港区南青山</li>
</ul>

<p>美味しかったです。</p>

<button onClick="getElement(1);">前にノードを追加</button>
<button onClick="getElement(2);">子ノードの先頭にノードを追加</button>

<script>
function getElement(pos){
    let element = document.getElementById('shopinfo');

    if (pos == 1){
         element.insertAdjacentHTML('beforebegin', '<p>ランチを食べました</p>');
    }else{
         element.insertAdjacentHTML('afterbegin', '<li id="m00">洋食屋</li>');
    }
}
</script>
</body>
</html>

「前にノードを追加」ボタンをクリックすると、 id 属性が shopinfo の要素ノードの前にノードを追加します。

ノードを指定の位置に追加する(1)

「子ノードの先頭にノードを追加」ボタンをクリックすると、 id 属性が shopinfo の要素ノードの子ノードの先頭にノードを追加します。

ノードを指定の位置に追加する(2)

-- --

insertAdjacentHTML メソッドの使い方について解説しました。

( Written by Tatsuo Ikura )

Profile
profile_img

著者 / TATSUO IKURA

プログラミングや開発環境構築の解説サイトを運営しています。

カテゴリ
検索