jQuery入門

トップ > jQuery > Manipulation

Manipulation(DOM Insertion, Inside)

obj.prepend(content[, content...]) (1.0)
obj.prepend(function(index, html)) (1.4)

obj の先頭に content を挿入します。

$("p").prepend("<em>insert</em>");    // <p><em>insert</em>...</p>
obj.append(content[, content...]) (1.0)
obj.append(function(index, html)) (1.4)

obj の末尾に content を挿入します。

$("p").append("<em>insert</em>");    // <p>...<em>insert</em></p>
obj.prependTo(target) (1.0)

objtarget の先頭に挿入します。

$("<em>insert</em>").prependTo("p");    // <p><em>insert</em>...</p>
obj.appendTo(target) (1.0)

objtarget の末尾に挿入します。

$("<em>insert</em>").appendTo("p");    // <p>...<em>insert</em></p>

Manipulation(DOM Insertion, Outside)

obj.before(content[, content...]) (1.0)
obj.before(function(index)) (1.4)

obj の直前に content を挿入します。

$("p").before("<em>insert</em>");    // <em>insert</em><p>...</p>
$("blockquote").before(function() {
    return "<em>insert</em>";
});
obj.after(content[, content...]) (1.0)
obj.after(function(index)) (1.4)

obj の直後に content を挿入します。

$("p").after("<em>insert</em>");    // <p>...</p><em>insert</em>
obj.insertBefore(target) (1.0)

objtarget の直前に挿入します。

$("<em>insert</em>").insertBefore("p");    // <em>insert</em><p>...</p>
obj.insertAfter(target) (1.0)

objtarget の直後に挿入します。

$("<em>insert</em>").insertAfter("p");    // <p>...</p><em>insert</em>

Manipulation(DOM Insertion, Around)

obj.wrap(wrappingElement) (1.0)
obj.wrap(function(index)) (1.4)

objwrappingElement 要素で囲みます。下記の例では、p要素を <div class='box'>~</div> で囲みます。

$("p").wrap("<div class='box' />");
実行前
  <p>...</p>
  <p>...</p>
実行後
<div class='box'>
  <p>...</p>
</div>
<div class='box'>
  <p>...</p>
</div>

function(index) を指定した場合は、関数の戻り値を wrappingElement とみなします。

$("div.url").wrap(function() {
    return "<a href='" + $(this).text() + "' />";
});
obj.wrapAll(wrappingElement) (1.2)

obj の要素集合をまとめて wrappingElement で囲みます。

$("p").wrapAll("<div class='box' />");
実行前
  <p>...</p>
  <p>...</p>
実行後
<div class='box'>
  <p>...</p>
  <p>...</p>
</div>
obj.wrapInner(wrappingElement) (1.2)
obj.wrapInner(function(index)) (1.4)

obj のコンテンツを wrappingElement で囲みます。

$("p").wrapInner("<em />");
実行前
<p>...</p>
実行後
<p><em>...</em></p>

Manipulation(DOM Replacement)

obj.replaceAll(target) (1.2)

targetobj で置き換えます。

$("<div>new Content</div>").replaceAll("div#d1");
obj.replaceWith(newContent) (1.2)
obj.replaceWith(function) (1.4)

objnewContent で置き換えます。

$("div#d1").replaceWith("<div>new Content</div>");

関数を用いることも可能です。

$("h1").replaceWith(function() {
    return "<h2>" + $(this).html() + "</h2>";
});

Manipulation(DOM Removal)

obj.remove([selector]) (1.0)

obj要素の中から selector にマッチする要素を削除します。

$("div.current").remove();
obj.detach([selector]) (1.4)

obj要素の中から selector にマッチする要素を削除します。remove() が完全に削除するのに対して、detach() は jQuery要素として残り、再度挿入することが可能です。

var obj = $("div.current").detach();
obj.empty() (1.0)

obj の子孫要素をすべて削除します。

$("div.curent").empty();
obj.unwrap() (1.4)

obj の親要素を削除します。<div><p>...</p></div> とある時下記を実行すると、<p>...</p> のみになります。

$("p").unrap();
実行前
<div>
  <p>...</p>
</div>
実行後
  <p>...</p>

Manipulation(Copying)

obj.clone([withDataAndEvents]) (1.0)
obj.clone([withDataAndEvents][, deepWithDataAndEvents]) (1.5)

obj を複製します。withDataAndEvents に true を指定すると、データやイベントハンドラも一緒にコピーします。規定値は false です。deepWithDataAndEvents を true にすると、子孫要素のデータやイベントもコピーします。規定値は withDataAndEvents と同じ値になります。

$("#d1").clone().insertAfter("#d2");

Copyright (C) 2013 杜甫々
初版:2013年2月3日
http://www.tohoho-web.com/js/jquery/manipulation.htm