js STUDIO

.before()

各要素の前に指定したHTMLやエレメントを挿入します。

.before( content [, content] ) 1.0追加

戻り値:jQuery

引数 説明
content HTML文字列, DOM要素, jQueryオブジェクトを指定して、マッチした各要素の前に挿入します。
[content] 更に挿入したいHTML文字列, DOM要素, jQueryオブジェクトを、またはそれらの配列を指定します。

.before( function(index) ) 1.4追加

戻り値:jQuery

引数 説明
function(index) マッチした各要素の前に挿入したいHTML文字列, DOM要素, jQueryオブジェクトを返す関数を 指定します。 関数が受け取る引数indexは、マッチした要素の番号を示します。 
$('p').before(function() {
  //各P要素の前に、class名をテキストに持つDIVを出力します。
  return '<div>' + this.className + '</div>';
});

補足事項

.before()と.insertBefore()は同じ働きをします。 大きな違いは「挿入される場所」と「挿入されるコンテンツ」の文法上の位置です。

element.before(target)
elementに「挿入される場所」、targetに「挿入するコンテンツ」
element.insertBefore(target)
elementに「挿入するコンテンツ」、targetに「挿入される場所」

Documentに繋がりのないノードの扱いについて

jQuery1.4以降では、.before()と.after()はDocumentに繋がりの無いノードであっても動作します。 例えば、次のようなコードがあった場合、 

$('<div/>').after('<p></p>');

jQueryはDIV、Pの順番でこれらの要素のセットを生成します。 これらは、Documentに挿入する前であっても取り扱うことが出来ます。 

$('<div/>').after('<p></p>').addClass('foo')
  .filter('p').attr('id', 'bar').html('hello')
.end()
.appendTo('body');

このコードが実行されると下記のコードが</body>の直前に配置されます。 

<div class="foo"></div>
<p class="foo" id="bar">hello</p>

サンプル

次のようなコードがあった場合、

<div class="container">
  <h2>ようこそ</h2>
  <div class="inner">こんにちは</div>
  <div class="inner">さようなら</div>
</div>

マッチする各要素の前にP要素を追加します。

$('.inner').before('<p>テスト</p>');

innerクラスを持つDIV要素は下記のように変更されます。

<div class="container">
  <h2>ようこそ</h2>
  <p>テスト</p>
  <div class="inner">こんにちは</div>
  <p>テスト</p>
  <div class="inner">さようなら</div>
</div>

また、ページ内のDOM要素を選択、挿入することも可能です。

$('.container').before($('h2'));

このコードが実行されると、クローンは作成されずマッチした要素の移動が行われます。

<h2>ようそこ</h2>
<div class="container">
  <div class="inner">こんにちは</div>
  <div class="inner">さようなら</div>
</div>

ただし、マッチした要素が複数ある場合は2つ目以降の挿入される要素はクローンのコピーが作成されます。

デモ

全てのP要素の前に指定したHTMLを挿入します。 

<!DOCTYPE html>
<html>
<head>
<style>p { background:yellow; }</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>P要素: </p>
<script>$("p").before("<b>挿入された要素です</b>");</script>
</body>
</html>

全てのP要素の前に生成したDOM要素を挿入します。 

<!DOCTYPE html>
<html>
<head>
<style>p { background:yellow; }</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>P要素</p>
<script>$("p").before( document.createTextNode("挿入されたテキストです。") );</script>
</body>
</html>

全てのP要素の前に、もともと配置されていたB要素をjQueryで取得して挿入します。 順序が入れ替わっていることに注目してください。 

<!DOCTYPE html>
<html>
<head>
<style>p { background:yellow; }</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>P要素</p>
<b>B要素</b>
<script>$("p").before( $("b") );</script>
</body>
</html>

 Back to top

© 2010 - 2017 STUDIO KINGDOM