JavaScript insertAdjacentHTMLメソッドで指定要素の前にhtmlタグを追加する
環境
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>
<!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>
<!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>」を追加します。