JavaScript insertAdjacentHTMLメソッドで指定要素の前にhtmlタグを追加する

2023年3月28日

環境
Google Chrome　111.0.5563.65
Windows 10 Home 64bit

書式
element.insertAdjacentHTML(position, text);
'beforebegin’　element の直前に挿入
insertAdjacentHTML() は、第二引数で指定するテキストを HTML または XML としてパースし、
その結果であるノードを DOM ツリー内の指定された位置（第一引数で指定）に挿入します。

使用例

<!DOCTYPE html>
<html>
<body>

<style>
#cft {
   font-size: 30px;
}
</style>

<div id="cft">test data tokyo</div>
<button onclick="add()">追加</button>

<script>
function add() {
   /*element の直前に要素を挿入*/
  document.querySelector('#cft').insertAdjacentHTML('beforebegin',
           '<p>oosaka</p>')
  }
</script>

</body>
</html>

実行結果
「追加」ボタンを押すと、指定した要素「id=cft」の前にhtmlタグ「<p>oosaka</p>」を追加します。

JavaScript

Posted by arkgame

関連記事: