prepend

.prepend(html, [elements])

マッチした要素の子要素として、HTML要素を先頭に追加します。

.prepend(html)

.prepend('<div>')
.prepend(u('<div>'))
.prepend(u('<div>').first()) // Same as document.createElement('div')
.prepend(u('<div></div><div></div>').nodes)
.prepend(function(){})
.prepend(function(el){}, elements)
.prepend(function(el){}, 10)

パラメータ

html: 下記参照

• 以下のいずれかの要素。
  • string : 挿入されるHTML。
  • instance : Umbrellaのインスタンス。
  • HTML node
  • array : HTML nodeの配列。
• 上記のいずれかを返すコールバック。以下のパラメータが渡されます。
  • el : elementsパラメータの現在の要素。指定されていない場合は{}、数値の場合はi。
  • i : 現在の要素のインデックス。

elements: 下記参照

htmlパラメータにコールバックを指定した場合に有効です。 以下のいずれかになります。オプションです。

• コールバックに渡される要素の配列。 コールバックは要素ごとに1回ずつ処理され、全て連続で追加されます。
• CSSセレクタ。 マッチした要素ごとに1回ずつ実行されます。
• 数値。 関数は指定した数値の数だけ実行されます。

戻り値

u

Umbrellaのインスタンスを返します。

例

各articleに、headerを追加します。

u("article").prepend("<header>Hello world</header>");

ulに3つの要素を追加します。 以下の例は全て同じ動作になります。

// 1つの文字列で全てを追加。
u("ul").prepend("<li>One</li><li>Two</li><li>Three</li>");

// メソッドチェーンで追加。
u("ul").prepend("<li>Three</li>").append("<li>Two</li>").append("<li>One</li>");

// functionを使って追加。
var cb = function(txt){ return "<li>" + txt + "</li>" };
u("ul").prepend(cb, ["One", "Two", "Three"]);

// ES6の記述で追加。
u("ul").prepend(txt => `<li>${ txt }</li>`, ["One", "Two", "Three"]);

結果は以下になります。

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>

  <!-- previous data -->
</ul>

HTMLノードを作成して、イベントを追加することもできます。

function greeting(){ alert("Hello world"); }

u("a.main").prepend(function(){
  return u('<a>').addClass('hi').on('click', greeting).html("Greetings!");
});

デモ

"デモ用文字列"をクリックすると、 "デモ用文字列"の上に、"One"、"Two"、"Three"の文字を追加します。
(div#demoの中に3つのdivが生成されます。)

JavaScript

u('#demo').on('click', function() {
  var cb = function(txt){ return '<div>' + txt + '</div>' };
  u(this).append(cb, ['One', 'Two', 'Three']);
});

HTML

<div id="demo">デモ用文字列</div>

関連項目

.append() マッチした要素の子要素として、HTML要素を末尾に追加します。

.before() マッチした要素の前に兄弟要素としてHTML要素を追加します。

.after() マッチした要素の後ろに兄弟要素としてHTML要素を追加します。