Mill's Note
  1. HOME
  2. jQuery・js
  3. 既存要素の移動・追加

【jQuery・js】既存要素の移動・追加

/

jQueryとJavaScript、とりあえずサクッと両方入れてみました。

JavaScriptのメソッドが頭に入っていないせいもありますが、単純にやるならやはりやっぱりjQueryの方が楽だなぁ – -;;

移動先要素の外側、前or後 に移動・追加する

jQuery

jQueryの移動・追加用メソッドは、それぞれ「移動 (追加)する要素」と「移動先 (追加先)」の位置が逆になる２種類があります。

対応要素が異なりますが、単純な移動・追加ならどちらを使用しても結果は同じ。
必要に応じて、使い勝手の良い方を利用してください

メソッド構文効果
nsetBefore$('.tg1').insertBefore('.dst');tg1をdstの前に移動・追加
複数要素・テキストのみは非対応
insertAfter$('.tg1').insertAfter('.dst');tg1をdstの後に移動・追加
複数要素・テキストのみは非対応
before$('.dst').before($('.tg1'));tg1をdstの前に移動・追加
複数要素・テキストのみも可
before複数指定$('.dst').before($('.tg1'), $('.tg2'));カンマ区切りで繋ぐ
after$('.dst').after($('.tg1'));tg1をdstの後に移動・追加
複数要素・テキストのみも可
after複数指定$('.dst').after($('.tg1'), $('.tg2'));カンマ区切りで繋ぐ

JavaScript

jQueryメソッド構文効果
beforeconst dst = document.querySelector('.dst');
const tg1 = document.querySelector('.tg1');
if (dst && tg1) {
  dst.parentNode.insertBefore(tg1, dst);
}		tg1をdstの前に挿入
before複数指定const dst = document.querySelector('.dst');
const tg1 = document.querySelector('.tg1');
const tg2 = document.querySelector('.tg2');
if (dst && tg1 && tg2) {
  dst.parentNode.insertBefore(tg1, dst);
  dst.parentNode.insertBefore(tg2, dst);
}		tg1,tg2 をdstの前に挿入
afterconst dst = document.querySelector('.dst');
const tg1 = document.querySelector('.tg1');
if (dst && tg1) {
  dst.parentNode.insertBefore(tg1, dst.nextSibling);
}		tg1をdstの後に挿入
after複数指定const dst = document.querySelector('.dst');
const tg1 = document.querySelector('.tg1');
const tg2 = document.querySelector('.tg2');
if (dst && tg1 && tg2) {
  dst.parentNode.insertBefore(tg2, dst.nextSibling);
  dst.parentNode.insertBefore(tg1, tg2);
}		tg1,tg2 をdstの後に挿入

移動先要素の中、最初or最後 に移動・追加する

jQuery

メソッド構文効果
prependTo$('.tg1').prepend('.dst');tg1をdstの最初に移動
複数要素・テキストのみは非対応
appendTo$('.tg1').appendTo('.dst');tg1をdstの最後に移動
複数要素・テキストのみは非対応
prepend$('.dst').prepend($('.tg1'));tg1をdstの最初に移動
複数要素・テキストのみも可
prepend複数指定$('.dst').prepend($('.tg1'), $('.tg2'));カンマ区切りで繋ぐ
append$('.dst').append($('.tg1'));tg1をdstの最後に移動
複数要素・テキストのみも可
append複数指定$('.dst').append($('.tg1'), $('.tg2'));カンマ区切りで繋ぐ

JavaScript

jQueryメソッド構文効果
prependconst dst = document.querySelector('.dst');
const tg1 = document.querySelector('.tg1');
if (dst && tg1) {
  dst.insertBefore(tg1, dst.firstChild);
}		tgをdstの最初に挿入
prepend複数指定const dst = document.querySelector('.dst');
const tg1 = document.querySelector('.tg1');
const tg2 = document.querySelector('.tg2');
if (dst && tg1 && tg2) {
  dst.insertBefore(tg2, dst.firstChild);
  dst.insertBefore(tg1, tg2);
}		tg1,tg2 をdstの最初に挿入
appendconst dst = document.querySelector('.dst');
const tg1 = document.querySelector('.tg1');
if (dst && tg1) {
  dst.appendChild(tg1);
}
tg1をdstの最後に挿入
append複数指定const dst = document.querySelector('.dst');
const tg1 = document.querySelector('.tg1');
const tg2 = document.querySelector('.tg2');
if (dst && tg1 && tg2) {
  dst.appendChild(tg1);
  dst.appendChild(tg2);
}		tg1,tg2 をdstの最後に挿入