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

2023年3月28日

環境
Google Chrome　111.0.5563.65
Windows 10 Home 64bit

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

使用例

<!DOCTYPE html>
<html>
<body>

<style>
#cft {
   font-size: 20px;
   color:green;
}
</style>

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

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

</body>
</html>

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

JavaScript

Posted by arkgame

関連投稿: