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でタブ切り替えを実装する方法【jQuery不要】

2022.10.10
10423
JavaScript

【JavaScript】スプレット構文(…)を使い、配列・オブジェクトを追加・連結(マージ)する方法

2022.12.04
591
JavaScript

JavaScriptで文字列を大文字・小文字に変換する方法

2023.01.17
667
JavaScript

【簡単】JavaScriptを使ってhtmlタグを取得し、値を出力・書き換える方法

更新日:2022.09.09
1239