概要

ここでは、エディターでのデザイン案作成時、要素の固定化を避け、要素移動を行う際に使えるjQueryメソッドについて記述します。(「固定化」については デザイン案不具合の原因となる動的要素の固定化について をご確認ください)

コンテクストメニューの「HTMLを編集」から要素のソースコードの書き換えを行うと、「replaceWith」などで書き換えが行われ、動的な要素を固定化してしまうことがあります。

また、コンテクストメニューを使わなくても、要素の位置を変更したいときに、

①元のページからHTMLをコピーし
②エディターで元の場所から移動したい要素を削除
③①を「append」や「before」などを使って、移動したい場所に要素追加する

といった編集を行うと、こちらも動的な要素を固定化してしまうことがあります。

有効なjQueryメソッド

• insetBefore

移動させたい要素のidやclassを指定して移動します。
他の指定した要素の上に移動します。
下記のように記述します。
$(".C").insertBefore(".A"); (要素CをAの上に移動する)

• insertAfter

移動させたい要素のidやclassを指定して移動します。
他の指定した要素の下に移動します。
下記のように記述します。
$(".C").insertAfter(".A"); (要素CをAの下に移動する)

• appendTo

移動させたい要素のidやclassを指定して移動します。
他の指定した要素の中の一番最後に移動します。
下記のように記述します。
$(".C").appendTo(".A"); (要素CをAの中の一番最後に移動する)

• prependTo

移動させたい要素のidやclassを指定して移動します。
他の指定した要素の中の先頭に移動します。
下記のように記述します。
$(".C").prependTo(".A"); (要素CをAの中の一番先頭に移動する)