HTMLで要素の親子関係を変更して要素の位置を変更するコードを紹介します。
概要
HTMLでDOMにアクセスして要素を取得し、その要素の親子関係を変更することで要素の表示位置を変更することができます。この記事では要素の親子関係を変更することで、
要素の位置を変更するJavaScriptのコードを紹介します。
要素の親子関係を変更するには、appendChild() メソッドを利用します。
プログラム
コード
下記のコードを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="MoveElement.css" />
<title></title>
<script type="text/javascript">
function ButtonClick() {
var elem_c = document.getElementById("frame3");
var elem_p = document.getElementById("frame2");
elem_p.appendChild(elem_c);
}
</script>
</head>
<body>
<div id="frame1">Frame1</div>
<div id="frame2">Frame2</div>
<div id="frame3">Frame3</div>
<div id="frame4">Frame4</div>
<div id="frame5">Frame5</div>
<input type="button" onclick="ButtonClick();" value="Exec"/>
</body>
</html>
#frame1 {
margin-top:0.5rem;
width: 320px;
height: 64px;
border: 1px solid #ff6a00;
}
#frame2 {
margin-top: 0.5rem;
width: 320px;
height: 64px;
border: 1px solid #ffd800;
}
#frame3 {
margin-top: 0.5rem;
width: 120px;
height: 32px;
border: 1px solid #4cff00;
}
#frame4 {
margin-top: 0.5rem;
width: 320px;
height: 64px;
border: 1px solid #0094ff;
}
#frame5 {
margin-top: 0.5rem;
width: 320px;
height: 64px;
border: 1px solid #b200ff;
}
解説
ボタンのクリックにより、下記のJavaScriptのコードが実行されます。getElementByIdメソッドを用いて、id が "frame3" の要素と "frame2" の要素を取得します。
frame2の要素の
appendChildメソッドを呼び出します。引数(パラメーター)にこの要素の子要素に追加する要素を与えます。下記のコードでは frame3の要素をパラメーターとして与えています。
frame2の子要素にframe3を追加する動作になります。
function ButtonClick() {
var elem_c = document.getElementById("frame3");
var elem_p = document.getElementById("frame2");
elem_p.appendChild(elem_c);
}
実行結果
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
ページの[Exec]ボタンをクリックします。Frame3 の枠が Frame2の枠の子要素に変更され、Frame2の枠の中に移動します。
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
最終更新日: 2020-04-11
作成日: 2020-04-09
