Written by Kasumi

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の埋め込む場所を指定する方法について紹介しました。

以上で解説を終わります。

目次

関連記事

JavaScript

【JavaScript】selectボックスで選択したoptionによってクラスを追加・削除する方法

2022.10.14
2235
JavaScript

HTMLのformでsubmitした時、ページ遷移させない方法【JavaScript】

2022.10.09
3890
JavaScript

【jQuery不要】スムーススクロールをJavaScriptで実装する方法

2022.10.07
1185
JavaScript

JavaScriptでスクロールしたら要素をアニメーション表示する方法【Intersection Observer APIが便利】

2022.09.08
2288