指定した要素(エレメント)の子要素の最初、または最後にinsertAdjacentHTMLを利用してHTMLを挿入する - JavaScript

JavaScriptを利用して、指定した要素(エレメント)の子要素の最初、または最後にHTMLを挿入するコードを紹介します。

概要

指定した要素(エレメント)の子要素の最初、または、最後にHTMLを挿入する場合は、insertAdjacentHTML() メソッドを利用すると実現できます。
insertAdjacentHTML メソッドの詳細はこちらの記事を参照してください。

プログラム : 指定した要素(エレメント)の子要素の最初に挿入する場合

コード

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <style>
    <!--
    .InnerFrame {
      margin-top:2px;
      border: solid 1px #0094ff;
    }
    -->
  </style>
  <script type="text/javascript">
    function buttonClick(e) {
      var elem = document.getElementById('OuterFrame');
      htmlstr = '<div id="InnerFrame06" class="InnerFrame">要素06</div>';
      elem.insertAdjacentHTML('afterbegin', htmlstr);
    }
  </script>
</head>
<body>
  <div id="OuterFrame">
    <div id="InnerFrame01" class="InnerFrame">要素01</div>
    <div id="InnerFrame02" class="InnerFrame">要素02</div>
    <div id="InnerFrame03" class="InnerFrame">要素03</div>
    <div id="InnerFrame04" class="InnerFrame">要素04</div>
    <div id="InnerFrame05" class="InnerFrame">要素05</div>
  </div>

  <hr />
  <input id="Button1" type="button" value="Insert" onclick="buttonClick();" />

</body>
</html>

解説

inputタグは下記の記述になっており、ボタンをクリックすると、butonClick()関数を実行する動作になっています。

<input id="Button1" type="button" value="Insert" onclick="buttonClick();" />

ボタンのクリックにより、下記のbuttonClick() 関数が実行されます。最初にgetElementById() メソッドにより、'OuterFrame' のIDのdiv要素が取得され、elem変数に代入されます。elem要素のinsertAdjacentHTML()を呼び出し、elem要素の子要素にHTMLを挿入します。
今回のコードでは、insertAdjacentHTML() メソッドの第一引数に afterbegin を与えているため、elemの要素の子要素の最初の位置に第二引数で与えたHTMLの文字列が挿入されます。
elem要素は、'OuterFrame' のIDのdiv要素が代入されているため、OuterFrameの子要素の最初の要素である[要素01]の手前に[要素06]のdiv枠が挿入される動作になります。

function buttonClick(e) {
  var elem = document.getElementById('OuterFrame');
  htmlstr = '<div id="InnerFrame06" class="InnerFrame">要素06</div>';
  elem.insertAdjacentHTML('afterbegin', htmlstr);
}

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。

[Insert]ボタンをクリックします。buttonClick() 関数が実行され、OuterFrame の子要素の最初の位置に[要素06]のdiv枠が挿入されます。子要素の先頭に挿入されるため、[要素01]の上に[要素06]の枠が表示されます。

プログラム : 指定した要素(エレメント)の子要素の最後に挿入する場合

コード

指定された要素の子要素の最後に挿入する場合は、先のコードのbuttonClick() 関数を下記に変更します。

function buttonClick(e) {
  var elem = document.getElementById('OuterFrame');
  htmlstr = '<div id="InnerFrame06" class="InnerFrame">要素06</div>';
  elem.insertAdjacentHTML('beforeend', htmlstr);
}

解説

ボタンのクリックにより、ButtonClick() 関数が実行されます。最初にgetElementById() メソッドにより、'OuterFrame' のIDのdiv要素が取得され、elem変数に代入されます。elem要素のinsertAdjacentHTML()を呼び出し、elem要素の子要素にHTMLを挿入します。
今回のコードでは、insertAdjacentHTML() メソッドの第一引数に beforeend を与えているため、elemの要素の子要素の最後の位置に第二引数で与えたHTMLの文字列が挿入されます。
elem要素は、'OuterFrame' のIDのdiv要素が代入されているため、OuterFrameの子要素の最初の要素である[要素05]の下に[要素06]のdiv枠が挿入される動作になります。