JavaScriptで指定した要素(エレメント)の前 または 後にHTMLを挿入するコードを紹介します。
概要
指定した要素の前後にHTMLを挿入するには、insertAdjacentHTML メソッドを利用すると実現できます。この記事では、insertAdjacentHTML を利用したコードを紹介します。
insertAdjacentHTML メソッドの詳細は
こちらの記事を参照してください。
プログラム:指定した要素の後に挿入する場合
コード
下記のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
<!--
.InnerFrame {
margin-top:2px;
border: solid 1px #0094ff;
}
-->
</style>
<script type="text/javascript">
function buttonClick(e) {
var elem = document.getElementById('InnerFrame04');
htmlstr = '<div id="InnerFrame06" class="InnerFrame">要素06</div>';
elem.insertAdjacentHTML('afterend', htmlstr);
}
</script>
</head>
<body>
<div id="OuterFrame">
<div id="InnerFrame01" class="InnerFrame">要素01</div>
<div id="InnerFrame02" class="InnerFrame">要素02</div>
<div id="InnerFrame03" class="InnerFrame">要素03</div>
<div id="InnerFrame04" class="InnerFrame">要素04</div>
<div id="InnerFrame05" class="InnerFrame">要素05</div>
</div>
<hr />
<input id="Button1" type="button" value="Insert" onclick="buttonClick();" />
</body>
</html>
解説
inputタグは下記の記述になっており、ボタンをクリックすると、butonClick()関数を実行する動作になっています。
<input id="Button1" type="button" value="Insert" onclick="buttonClick();" />
ボタンのクリックにより、下記のbuttonClick() 関数が実行されます。最初にgetElementById() メソッドにより、'InnerFrame04' のIDのdiv要素が取得され、elem変数に代入されます。elem要素のinsertAdjacentHTML()を呼び出し、elem要素の前後にHTMLを挿入します。
今回のコードでは、insertAdjacentHTML() メソッドの第一引数に
afterend を与えているため、elemの要素の後ろに第二引数で与えたHTMLの文字列が挿入されます。
elem要素は、'InnerFrame04' のIDのdiv要素が代入されているため、[要素04]の直後に[要素06]のdiv枠が挿入される動作になります。
function buttonClick(e) {
var elem = document.getElementById('InnerFrame04');
htmlstr = '<div id="InnerFrame06" class="InnerFrame">要素06</div>';
elem.insertAdjacentHTML('afterend', htmlstr);
}
実行結果
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
[Insert]ボタンをクリックします。[要素04]の直後に[要素06]のdiv枠が追加されたことが確認できます。
プログラム:指定した要素の前に挿入する場合
コード
指定した要素の直前に挿入する場合は、先のbuttonClick() 関数のコードを下記に修正します。
function buttonClick(e) {
var elem = document.getElementById('InnerFrame04');
htmlstr = '<div id="InnerFrame06" class="InnerFrame">要素06</div>';
elem.insertAdjacentHTML('beforebegin', htmlstr);
}
解説
ボタンのクリックにより、buttonClick() 関数が実行されます。getElementById() メソッドにより、'InnerFrame04' のIDのdiv要素が取得され、elem変数に代入されます。elem要素のinsertAdjacentHTML()を呼び出し、elem要素の前後にHTMLを挿入します。
今回のコードでは、insertAdjacentHTML() メソッドの第一引数に
beforebegin を与えているため、elemの要素の手前に第二引数で与えたHTMLの文字列が挿入されます。
elem要素は、'InnerFrame04' のIDのdiv要素が代入されているため、[要素04]の直前に[要素06]のdiv枠が挿入される動作になります。
実行結果
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
[Insert]ボタンをクリックします。[要素04]の直前に[要素06]のdiv枠が追加されたことが確認できます。
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
最終更新日: 2024-04-15
作成日: 2019-03-04
