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

広告

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

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

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

初心者~中級者の方を対象としたプログラミング方法や開発環境の構築の解説を行うサイトの運営を行っています。