iPentec.com / Document / カテゴリ: JavaScript / タグ: JavaScript

insertAdjacentHTML, insertAdjacentText を利用して要素をHTMLページに挿入する

書式

insertAdjacentHTML

insertAdjacentHTML([挿入位置], [挿入するHTML文字列])

insertAdjacentText

insertAdjacentText([挿入位置], [挿入するテキスト文字列])

[挿入位置]は以下の4つの値のいづれかを与えます。

値	意味
beforebegin	要素の直前に挿入します。要素のタグの外側です。
afterbegin	要素の内部の先頭に挿入します。要素のタグの内側です。
beforeend	要素の内部の末尾に挿入します。要素のタグの内側です。
afterend	要素の直後に挿入します。要素のタグの外側です。

実装例:insertAdjacentHTML

HTML, CSS

以下のHTML,CSSファイルを作成します。

insertAdjacentHtmlDemo.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <link rel="stylesheet" href="insertAdjacentHtmlDemo.css" />
  <script>
    function InsertBeforeBegin() {
      var elem = document.getElementById('Frame3');
      elem.insertAdjacentHTML('beforebegin','<div class="ContentFrame">コンテンツです。</div>');
    }
    function InsertAfterBegin() {
      var elem = document.getElementById('Frame3');
      elem.insertAdjacentHTML('afterbegin', '<div class="ContentFrame">コンテンツです。</div>');
    }
    function InsertBeforeEnd() {
      var elem = document.getElementById('Frame3');
      elem.insertAdjacentHTML('beforeend', '<div class="ContentFrame">コンテンツです。</div>');
    }
    function InsertAfterEnd() {
      var elem = document.getElementById('Frame3');
      elem.insertAdjacentHTML('afterend', '<div class="ContentFrame">コンテンツです。</div>');
    }
  </script>
</head>
<body>
  <h1>insertAdjacentHTMLのデモ</h1>
  <hr />
  <button onclick="InsertBeforeBegin();">beforebegin</button>
  <button onclick="InsertAfterBegin();">afterbegin</button>
  <button onclick="InsertBeforeEnd();">beforeend</button>
  <button onclick="InsertAfterEnd();">afterend</button>
  <hr />
  <div id="Frame1" class="Frame">Frame1です。</div>
  <div id="Frame2" class="Frame">Frame2です。</div>
  <div id="Frame3" class="Frame">Frame3です。</div>
  <div id="Frame4" class="Frame">Frame4です。</div>
</body>
</html>

insertAdjacentHtmlDemo.html

.Frame {
  background-color:#fff7ca;
  border:2px solid #c36666;
  margin:1rem 0 0 0;
  padding: 0.5rem 1rem 0.5rem 1rem;
}

.ContentFrame {
  background-color: #95c6d1;
  border: 2px solid #3a7785;
}

解説

[beforebegin] [afterbegin] [beforeend] [afterend] の4つのボタンを配置しています。ボタンをクリックすると、Frame3の要素に、それぞれの挿入位置オプションの値でHTMLを挿入します。挿入位置の違いで表示がどのように異なるかを確認します。

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
insertAdjacentHTML, insertAdjacentText を利用して要素をHTMLページに挿入する:画像1

[beforebegin]ボタンをクリックします。Frame3の外側の直前に挿入されるため、Frame3の上に追加の枠が表示されます。

[afterbegin]ボタンをクリックした際の結果です。Frame3の内側の先頭に挿入されるため、[Frame3です。]の文字列の上部に表示されます。
insertAdjacentHTML, insertAdjacentText を利用して要素をHTMLページに挿入する:画像3

[beforeend]ボタンをクリックした際の結果です。Frame3の内側の末尾に挿入されるため、[Frame3です。]の文字列の下側に表示されます。

[afterend]ボタンをクリックした際の結果です。Frame3の外側の直後に挿入されるため、Frame3の枠の下に表示されます。
insertAdjacentHTML, insertAdjacentText を利用して要素をHTMLページに挿入する:画像5

実装例:insertAdjacentText

HTML, CSS

insertAdjacentTextDemo.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <link rel="stylesheet" href="insertAdjacentTextDemo.css" />
  <script>
    function InsertBeforeBegin() {
      var elem = document.getElementById('Frame3');
      elem.insertAdjacentText('beforebegin','コンテンツです。');
    }
    function InsertAfterBegin() {
      var elem = document.getElementById('Frame3');
      elem.insertAdjacentText('afterbegin', 'コンテンツです。');
    }
    function InsertBeforeEnd() {
      var elem = document.getElementById('Frame3');
      elem.insertAdjacentText('beforeend', 'コンテンツです。');
    }
    function InsertAfterEnd() {
      var elem = document.getElementById('Frame3');
      elem.insertAdjacentText('afterend', 'コンテンツです。');
    }
  </script>
</head>
<body>
  <h1>insertAdjacentHTMLのデモ</h1>
  <hr />
  <button onclick="InsertBeforeBegin();">beforebegin</button>
  <button onclick="InsertAfterBegin();">afterbegin</button>
  <button onclick="InsertBeforeEnd();">beforeend</button>
  <button onclick="InsertAfterEnd();">afterend</button>
  <hr />
  <div id="Frame1" class="Frame">Frame1です。</div>
  <div id="Frame2" class="Frame">Frame2です。</div>
  <div id="Frame3" class="Frame">Frame3です。</div>
  <div id="Frame4" class="Frame">Frame4です。</div>
</body>
</html>

insertAdjacentTextDemo.css

.Frame {
  background-color:#c7e9b7;
  border:2px solid #2e905d;
  margin:1rem 0 0 0;
  padding: 0.5rem 1rem 0.5rem 1rem;
}

解説

先のinsertAdjacentHTMLとほぼ同じ動作です。挿入するメソッドは、insertAdjacentTextを利用しています。

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
insertAdjacentHTML, insertAdjacentText を利用して要素をHTMLページに挿入する:画像6

[beforebegin]ボタンをクリックします。Frame3の外側の直前に挿入されるため、Frame3の上に文字列が表示されます。

[afterbegin]ボタンをクリックした際の結果です。Frame3の内側の先頭に挿入されるため、[Frame3です。]の文字列の手前に文字列が表示されます。
insertAdjacentHTML, insertAdjacentText を利用して要素をHTMLページに挿入する:画像8

[beforeend]ボタンをクリックした際の結果です。Frame3の内側の末尾に挿入されるため、[Frame3です。]の文字列の後ろに文字列が表示されます。

[afterend]ボタンをクリックした際の結果です。Frame3の外側の直後に挿入されるため、Frame3の枠の下に表示されます。
insertAdjacentHTML, insertAdjacentText を利用して要素をHTMLページに挿入する:画像10