.insertBefore()【要素前 挿入 (要素指定)】
メモ
- 指定要素の直前に該当コンテンツを挿入
- 該当コンテンツがページ上の要素の場合、移動 (複数個所に挿入の場合、先頭以外はクローンが作成され挿入)
挿入後の新しいjQueryオブジェクトを返却
jQuery 1.9 より前:単一の場合、変更前の元のjQueryオブジェクトが返却されるため、要素数により.end()【最終操作 直前状態】の使用有無の判定が必要 - 公式にはSVGは未サポート (公式サポートは、.addClass()【クラス追加】 ・.removeClass()【クラス削除】 等)
- 実行コードが含まれる可能性があるので、クロスサイトスクリプティング (XSS) の脆弱性に注意
- 該当コンテンツがページ上の要素の場合、移動 (複数個所に挿入の場合、先頭以外はクローンが作成され挿入)
- 関連
- コンテンツをパラメータ指定する場合、.before()【要素前 挿入 (コンテンツ指定)】
- 要素の後に挿入する場合、.after()【要素後 挿入 (コンテンツ指定)】 ・.insertAfter()【要素後 挿入 (要素指定)】
構文
関連
例
<style>
.border { border:1px black solid; padding:1px 5px; }
.border2 { border:2px red dashed; padding:3px 5px; line-height:225%; }
.color1 { color:red; }
.bold { font-weight:bold; }
</style>
<span id="id0" class="bold border2">(jQuery [id0])</span>
<p><span id="id1" class="border">[id1]</span></p>
<p><span id="id2" class="border">[id2]</span></p>
<p><span class="classA border">[classA]</span></p>
<p><span class="classB border">[classB]</span></p>
<p><span class="classC border">[classC]</span></p>
<p><span class="classX border">[classX]-1</span></p>
<p><span class="classX border">[classX]-2</span></p>
<p><span class="classX border">[classX]-3</span></p>
<script>
$("<span class='color1 border2'>(Selector)</span>").insertBefore( "#id1" );
var elm = document.getElementById("id2");
$("<span class='border2'>(Elemnt)</span>").insertBefore(elm);
$("<span class='border2'>(Array)</span>").insertBefore( [ ".classA", ".classB", ".classC" ] );
$("#id0").insertBefore( $(".classX") );
</script>
(jQuery [id0]) [id1]
[id2]
[classA]
[classB]
[classC]
[classX]-1
[classX]-2
[classX]-3