読者です 読者をやめる 読者になる 読者になる

はぴらき合理化幻想

海外3年/西成ドヤ2年/沖縄2年/事故物件で寝袋3年目、ミニマリスト10年目でダンボール2箱の持ち物と保存食で大阪に定住中。

JavaScriptで要素の移動/複製はappendChild・insertBefore・cloneNodeを使う、jQueryに依存しない

web制作 自作した あれ JavaScript

要素の移動や複製に関して、備忘録として簡単なコードを作ったよ。JavaScriptをほんの少しだけ使いたい時はjQueryなどのライブラリを使わずにネイティブ関数でサクッと書きたいね。

具体例用の単純なHTML

次のHTMLの要素を移動したり複製したりする。北斗四兄弟で兄弟要素の順番を表している。それぞれのサンプルページを作成したので、サンプルページとそのソースを確認すれば移動/複製の様子が一目瞭然だ。

<ol id="hokuto">
  <li id="raoh">ラオウ</li>
  <li id="toki">トキ</li>
  <li class="jagi">ジャギ</li>
  <li id="kenshiro">ケンシロウ</li>
</ol>

憎しみの残らないきょうだいゲンカの対処法

appendChildで要素を親要素の最後に移動

ジャギはケンシロウの兄でありながらも行いが好ましくないので一番下に移動させたい。

降格人事・役職交代の導入とすすめ方

コード

var hokuto = document.getElementById('hokuto');
var jagi   = document.body.querySelector('.jagi');
hokuto.appendChild(jagi);

解説

コードを一行ごとに解説すると次のとおり。

  1. どの要素内の一番下に移動させたいかを指定するためにIDを取得。
  2. 移動させるジャギのIDを取得したいが、IDがないのでクラスを取得。
  3. 北斗四兄弟の中の最後の子要素としてジャギを追加。

補足

IE8以降は、document.body.querySelector()でクラスを取得できる。クラスを取得する際はドットが必要なので注意。ジャギのように一人前と認められずIDを与えられていなくても安心だ。

サンプルページ

insertBeforeで要素を指定場所の前に移動

北斗四兄弟でケンシロウが一番強いのでラオウの前に移動させたい。

実力主義の賃金・賞与・評価の決め方

コード

var hokuto   = document.getElementById('hokuto');
var kenshiro = document.getElementById('kenshiro');
var raoh     = document.getElementById('raoh');
hokuto.insertBefore(kenshiro,raoh);

解説

一行ごとの解説は次のとおり。

  1. 親要素のIDを取得。
  2. 移動させるケンシロウのIDを取得。
  3. ラオウの前に移動させるのでラオウのIDを取得。
  4. 北斗四兄弟でケンシロウをラオウの前に移動させる。

サンプルページ

ラオウ

insertBeforeで要素を指定場所の後ろに移動

北斗四兄弟でケンシロウを移動させて尊敬できる兄二人の後ろにしたい。

3番手美人の法則

コード

var hokuto   = document.getElementById('hokuto');
var kenshiro = document.getElementById('kenshiro');
var toki     = document.getElementById('toki');
hokuto.insertBefore(kenshiro,toki.nextSibling);

解説

  1. 親要素のIDを取得。
  2. 移動させるケンシロウのIDを取得。
  3. 2番目の兄であるトキのIDを取得。
  4. 北斗四兄弟でケンシロウをトキの後ろに移動させる。

補足

上記4では「トキの後ろに移動させる」と書いているが、正確には「トキの後ろの要素の前に移動させる=ジャギの前に移動させる」ということ。結果として「トキの後ろに移動させる」と同じ状況。なおinsertAfter()という関数はない。

英語でbrother(兄弟)とsister(姉妹)は男女の区別があるが、Siblingは男女の区別がない兄弟姉妹という意味。nextSiblingで次の弟(妹)という意味。

サンプルページ

ケンシロウ

cloneNodeで要素を複製しappendChildで追加

原作およびアニメでトキに似たようなキャラ(自称天才のあいつ)が出てきたので、トキを複製して北斗四兄弟の最後に追加する。

模倣の経営学

コード

var hokuto = document.getElementById('hokuto');
var toki   = document.getElementById('toki');
var clone  = toki.cloneNode(true);
hokuto.appendChild(clone);

解説

  1. 親要素のIDを取得。
  2. 複製元のトキのIDを取得。
  3. トキを複製する。
  4. 北斗四兄弟の最後に複製したトキを追加する。

サンプルページ

トキ

まとめ

ページの一部分で要素の移動や複製をする程度ならjQueryを使わずにネイティブで記述する方が処理が速いしスマートだね。

入門者のJavaScript

北斗の拳 文庫版 全15巻

てすとてすと