iPentec.com / Doc / JavaScript / JavaScript DOM操作

HTMLページの要素の順番を変更して要素の位置を変更する - JavaScript

HTMLページの要素の順番を変更して要素の位置を変更するコードを紹介します。

概要

JavaScriptを利用して要素の順番を変更して要素の位置を変更する場合には、insertBefore() メソッドを利用します。
なお、DOMノードの親子関係を変更する場合はこちらの記事を参照して下さい。

書式

(挿入操作をするノードの要素のオブジェクト).insertBefore((挿入する要素のオブジェクト), (挿入する位置の直後の要素))

記述例

次のコードは bodyタグの直下に、insertObj の要素を insertPositionObj の要素の手前に挿入します。~

document.body.insertBefore(insertObj, insertPositionObj);

プログラム

下記のHTML, CSSファイルを作成します。

コード

MoveElementChangeOrder.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="MoveElementChangeOrder.css" />
    <title></title>
  <script type="text/javascript">
    function ButtonClick() {
      var elem_s = document.getElementById("frame4");
      var elem_t = document.getElementById("frame2");

      document.body.insertBefore(elem_s, elem_t);
    }
  </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>

MoveElementChangeOrder.css

#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: 320px;
  height: 64px;
  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;
}

解説

[Exec]ボタンのクリックにより、以下のJavaScriptが実行されます。
id="frame4" と id="frame2" の要素を取得します。bodyタグの直下に frame2 の手前に frame4 の要素を移動して挿入します。

  function ButtonClick() {
    var elem_s = document.getElementById("frame4");
    var elem_t = document.getElementById("frame2");

    document.body.insertBefore(elem_s, elem_t);
  }