JavaScriptでHTMLの埋め込む場所を指定する方法

JavaScriptで動的にHTMLを埋め込みたい。
埋め込む場所を指定したい。
本記事ではこのような悩みを解決します。
insertAdjacentHTML()を使おう
<div class="box">
<!-- ここに埋め込みたい -->
</div>
<script>
var element = document.querySelector('.box');
var text = '<p>hello word</p>';
// boxクラス内の最後の子要素後にtextを埋め込み
element.insertAdjacentHTML('beforeend', text);
</script>
JavaScriptで動的にHTMLを埋め込むコード例です。
insertAdjacentHTML()を使います。
使い方は以下の通りです。
埋め込み先HTML要素.insertAdjacentHTML(‘場所’, 埋め込み要素);
第一引数に以下を文字列で指定する事で、埋め込み先HTML要素のどの位置に挿入するか指定できます。
‘beforebegin‘
埋め込み先要素の前に挿入
‘afterbegin‘
埋め込み先要素内の直前に挿入
‘beforeend’
埋め込み先要素内の最後の子要素の後に挿入
‘afterend‘
埋め込み先要素の後に挿入
以上で実装完了です。
まとめ
JavaScriptでHTMLの埋め込む場所を指定する方法について紹介しました。
以上で解説を終わります。
目次