こちらの記事では、insertAdjacentHTMLメソッドの使い方からテキストを追加する方法まで、サンプルコードを用いて分かりやすく解説しています。
JavaScriptの学習におすすめ参考書
改訂3版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで
先輩くん
10万部突破したJavaScriptの本が大幅増補改訂し7年ぶりに発売されたよ!
後輩ちゃん
最新の基本文法から、開発に欠かせない応用トピックまで学ぶことが出来るよ!
綺麗なコードが書けるようになる!
リーダブルコード-より良いコードを書くためのシンプルで実践的なテクニック
先輩くん
より良いコードを書きたい人におすすめの本だよ!
後輩ちゃん
10以上前の書籍ですが、内容は今でも役に立つものばかりです!
insertAdjacentHTMLの使い方
insertAdjacentHTMLは、テキストやコンテンツなどを追加する時に使用されるメソッドです。
第一引数に起点となる要素に対して追加したい位置を指定し、第二引数に追加したいテキストやコンテンツを記述します。
値 | 追加される位置 |
---|---|
afterbegin | 要素内の先頭 |
beforeend | 要素内の末尾 |
beforebegin | 要素の直前 |
afterend | 要素の直後 |
テキストやコンテンツなどを追加する時に使用されることが多い、innerHTMLメソッドは既存の要素の中身を全て新しいものに書き換えるため、insertAdjacentHTMLメソッドの方が高速に動作することができます。
サンプルコード
<button id="add-btn">要素追加ボタン</button>
<div id="content-point">起点となる要素</div>
<script>
const addBtn = document.getElementById('add-btn');
const contentPoint = document.getElementById('content-point');
addBtn.addEventListener('click',function(){
contentPoint.insertAdjacentHTML('afterbegin','<p>追加された要素</p>');
contentPoint.insertAdjacentHTML('beforeend','<p>追加された要素</p>');
contentPoint.insertAdjacentHTML('beforebegin','<p>追加された要素</p>');
contentPoint.insertAdjacentHTML('afterend','<p>追加された要素</p>');
});
</script>
上記のサンプルコードでは、「要素追加ボタン」をクリックするとテキストが追加されます。
起点となる要素に対して枠線を表示させており、要素内にテキストが追加された枠内に表示され、要素外にテキストが追加された枠外に表示されます。
afterbeginの実行結果
起点となる要素
beforeendの実行結果
起点となる要素
beforebeginの実行結果
起点となる要素
afterendの実行結果
起点となる要素
ブラウザの互換性
insertAdjacentHTMLメソッドのブラウザ実装状況は、以下のとおりです。
デバイス | ブラウザ | サポート |
---|---|---|
Chrome | 1 | |
Edge | 17 | |
FireFox | 8 | |
Internet Explorer | 部分サポート | |
Opera | 8 | |
Safari | 4 | |
WebView Android | 37 | |
Chrome Android | 18 | |
FireFox for Android | 8 | |
Opera Android | 10.1 | |
Safari on iOS | 4 | |
Samsung Internet | 1.0 |